js在指定位置增加节点函数insertBefore()用法实例
什么是insertBefore()函数
insertBefore()函数是DOM操作中常用的一种方法，它可以在某个元素的子节点列表中插入一个新的子节点。它需要两个参数，第一个是要插入的新节点，第二个是已存在的节点，新节点将插入到现有节点的前面。
parentElement.insertBefore(newElement,existingElement);
其中，parentElement表示要插入新节点的父元素；newElement表示要插入的节点；existingElement表示一个已存在的节点，新节点将会插入到这个节点的前面。
insertBefore()函数的使用示例
示例一：在指定元素前插入新元素
下面的示例将向已有的HTML代码中插入一个新的段落元素，并将它插入到指定的位置——页面中ID为"para2"的元素前面。
<!DOCTYPE html>
<html>
<head>
<title>insertBefore()使用示例一</title>
</head>
<body>
<p id="para1">这是第一个段落。</p>
<p id="para2">这是第二个段落。</p>
<p id="para3">这是第三个段落。</p>
<script>
// 查找ID为"para2"的元素
var para2 = document.getElementById("para2");
// 创建一个新的段落元素
var newPara = document.createElement("p");
// 在新元素中添加一些文本内容
var node = document.createTextNode("这是新的段落。");
newPara.appendChild(node);
// 将新元素插入到para2元素的前面
para2.parentNode.insertBefore(newPara, para2);
</script>
</body>
</html>
上面的代码中，我们首先使用getElementById()方法获取了ID为"para2"的元素，然后创建一个新的段落元素newPara，并在其中添加了一些文本内容。最后，我们使用insertBefore()方法将新的段落元素插入到存在的段落元素"para2"的前面。
示例二：在列表中插入新的列表项
下面的示例将增加一个列表项到现有的HTML列表中，并将它插入到列表中的指定位置。
<!DOCTYPE html>
<html>
<head>
<title>insertBefore()使用示例二</title>
</head>
<body>
<ul id="list">
<li>香蕉</li>
<li>苹果</li>
<li>桃子</li>
</ul>
<script>
// 查找ID为"list"的元素
var list = document.getElementById("list");
// 创建一个新的列表项
var newItem = document.createElement("li");
// 在新元素中添加一些文本内容
var node = document.createTextNode("橙子");
newItem.appendChild(node);
// 将新元素插入到list元素的第二个子元素处（也就是第二个列表项的前面）
list.insertBefore(newItem, list.childNodes[1]);
</script>
</body>
</html>
上面的代码中，我们首先使用getElementById()方法获取了ID为"list"的元素，然后创建一个新的列表项元素newItem，并在其中添加了一些文本内容。最后，我们使用insertBefore()方法将新的列表项元素插入到存在的列表项元素的前面。在这个示例中，我们把它插入到列表的第二个子元素处（也就是第二个列表项的前面）。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js在指定位置增加节点函数insertBefore()用法实例 - Python技术站
微信扫一扫 
支付宝扫一扫 