如何添加兄弟节点

最新推荐文章于 2023-10-09 21:30:04 发布

原创最新推荐文章于 2023-10-09 21:30:04 发布 · 3.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#原生JS #HTML

Web前端专栏收录该内容

85 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
</head>
<body>
   <button id="btn">按钮</button>
   <div class="box1">盒子1</div>

       btn.onclick = function(){
           insertAfter(box2Div, box1);
       }
       function insertAfter(newElement, targetElement){
       var parent = targetElement.parentNode;
       console.log(parent);
       if (parent.lastChild == targetElement) {
       // 如果最后的节点是目标元素，则直接添加。因为默认是最后
       parent.appendChild(newElement);
       }
       else
       {
       parent.insertBefore(newElement, targetElement.nextSibling);
       //如果不是，则插入在目标元素的下一个兄弟节点的前面。也就是目标元素的后面
       }
       }
   </script>
</body>
</html>