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>
    
    

     
  • 相关阅读:
    动态规划-石子问题
    动态规划-最长不下降子序列
    STL 二分查找
    动态规划-最长公共子序列与最长公共子串
    动态规划-背包问题
    高精度运算模板学习
    二叉树 | 根据前序、后序生成中序
    03.动画
    02.绘制函数
    01.hello world
  • 原文地址:https://www.cnblogs.com/lguow/p/11101268.html
Copyright © 2011-2022 走看看