美文网首页
insertAfter

insertAfter

作者: 薛定谔的程序 | 来源:发表于2019-12-24 18:18 被阅读0次
 <script>
        window.onload = function () {
            let oDiv = document.getElementById('div');
            let text = document.getElementById('text');
            let text2 = document.getElementById('text2');
            //创建新元素
            let newElement = document.createElement('p');
            let newElementTextNode = document.createTextNode('newElement!');
            newElement.appendChild(newElementTextNode);
            //新元素使用appendChild默认添加在父元素的所有子元素末尾
            // text2.append(newElement);//添加为text2的子节点
            // oDiv.appendChild(newElement);//所有子节点末尾,有标签,有内容
            // oDiv.insertBefore(newElementTextNode,null);
            //如果参照节点为null则新元素添加在父节点的子节点末尾,添加后看不到标签只有内容
            //oDiv.insertBefore(newElement,text2);
            //也就是js提供的appendChild和insertBefore已经足以将新元素添加在任意位置,不过有的面试可能会让写一个insertAfter函数:
           
            insertAfter(newElement,text);
        };
        function insertAfter(newElement,targetElement) {
            let Parent = targetElement.parentNode;
            if (Parent.lastChild == targetElement.parentNode){
                Parent.appendChild(newElement);
            }else{
                Parent.insertBefore(newElement,targetElement.nextSibling);
            }
        }
    </script>
</head>
<body>
<b>JS有appendChild方法和insertBefore方法,但却没有insertAfter,想实现插入在目标元素下面的功能,可以自己封装一个</b>
<div id="div">
    <p id="text">div下的一个节点,使用方法insertAfter将新元素添加到该节点之后</p>
    <p id="text2">我是text2新元素
        添加再我之前</p>
</div>
</body>
image.png

相关文章

网友评论

      本文标题:insertAfter

      本文链接:https://www.haomeiwen.com/subject/bomfoctx.html