js insertBefore

最新推荐文章于 2020-04-30 22:50:32 发布

原创最新推荐文章于 2020-04-30 22:50:32 发布 · 629 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

22 篇文章

订阅专栏

本文通过一个具体的示例详细介绍了如何使用JavaScript的insertBefore方法来在DOM树中的指定元素前插入新的节点。此外还解释了previousSibling属性的作用及如何利用这些方法实现灵活的DOM操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

insertBefore 插入函数实例

<div id="box-one">
<p class="con2" id="p1">1</p>
<p class="con2">2</p>
<p class="con2">3</p>
</div>
<script language="javascript">
window.onload =function () {
var btn = document.getElementById("creatbtn");

btn.onclick =function() {
insertEle();
}
}
function insertEle() {
var oTest = document.getElementById("box-one");
var newNode = document.createElement("div");//elem-PublicConfig_showLogo01-001
var zjd_prv = document.getElementById("p1");

newNode.innerHTML =" This is a newcon ";
//oTest.appendChild(newNode);previousSibling
oTest.insertBefore(newNode,zjd_prv.previousSibling); // 这两种方法均可实现

}
</script>

这里想说的是 nextSibling :某个元素之后紧跟的元素（处于同一树层级中）。
reforeNode.nextSibling ：取得的是reforeNode对象的紧跟着的下一个节点。
previousSibling - 取得某节点的上一个同级节点
由于可见insertBefore()方法的特性是在已有的子节点前面插入新的节点但是两种情况结合起来发现insertBefore()方法插入节点，是可以在子节点列表的任意位置。