zoukankan      html  css  js  c++  java
  • 解决原生javascript 缺少insertAfter的功能,非Jquery方法

    在现有的方法后插入一个新元素,你可能会想:既然有insertBefore方法,是不是也有一个相应的insertAfter()方法。很可惜,DOM没有提供方法。
    下面编写insertAfter函数,虽然DOM本身没有提供,但它确实提供了一个把一个节点插入到另一个节点之后所有工具。我们完全可以利用已有的DOM方法和属性编写一个insertAfter函数:
    
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    在现有的方法后插入一个新元素,你可能会想:既然有insertBefore方法,是不是也有一个相应的insertAfter()方法。很可惜,DOM没有提供方法。
    下面编写insertAfter函数,虽然DOM本身没有提供,但它确实提供了一个把一个节点插入到另一个节点之后所有工具。我们完全可以利用已有的DOM方法和属性编写一个insertAfter函数:
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        function insertAfter(newElement,targetElement){
            var parent = targetElement.parentNode;
            if(parent.lastChild == targetElement){
                parent.appendChild(newElement);
            }else{
                parent.insertBefore(newElement,targetElement.nextSibling);
            }
        }
        var p = document.createElement('p');
        var txt = document.createTextNode('我是新插入的节点');
        p.appendChild(txt);
    
    
        var lis = document.getElementsByTagName('li');
    
        //insertAfter(p,lis[0])
    </script>
    </body>
    </html>
    
    

     
  • 相关阅读:
    go学习笔记day19
    Mac11系统 SIP保护 如何在根目录创建data文件夹
    vue首页加载文件过多,去掉预加载
    NPM更换国内源
    autoCAD2007 图层
    读《现代JavaScript》笔记①——Map and Set(映射和集合)
    pubsubjs发布订阅
    vuecli中配置less并使用全局变量
    React组件通讯
    v6版reactrouterdom的改变
  • 原文地址:https://www.cnblogs.com/lguow/p/11101268.html
Copyright © 2011-2022 走看看