数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究在 JavaScript 中，如何在现有子节点前插入一个子节点？
在本文中，我们将学习如何在 JavaScript 中使用合适的示例，在现有子节点前插入一个子节点。
Javascript 提供了 `insertBefore()` 方法来在另一个子节点前插入一个子节点。如果我们有两个列表，我们可以根据需要使用 `insertBefore()` 方法在它们之间重新排列元素。
让我们通过本文后面的示例来更好地理解这个概念。
语法
在 JavaScript 中，使用 `insertBefore` 方法在现有子节点前插入子节点的语法如下：
insertBefore(newNode, refNode);
其中：
`newNode` 是要插入的新节点。
`refNode` 是 `newNode` 要插入其之前的现有节点。
示例 1
这是一个使用 `insertBefore()` 方法在 JavaScript 中在现有子节点前插入子节点的示例程序。
<!DOCTYPE html>
<html>
<head>
<title>Insert a node as a child before an existing child in JavaScript</title>
</head>
<body style="text-align: center;">
<h4>Insert a node as a child before an existing child in JavaScript using insertBefore()</h4>
<div id="main">
<p>Education is the passport to the future, for tomorrow belongs to those who prepare for it today.</p>
<p>The roots of education are bitter, but the fruit is sweet.</p>
</div>
<script>
// Create an element and add it to the node
var p_node = document.createElement("p");
var NodeEle = document.createTextNode("An investment in knowledge pays the best interest.");
p_node.appendChild(NodeEle);
//Inserting an element before an existing
var main_eles = document.getElementById('main');
main_eles.insertBefore(p_node, main_eles.children[1]);
</script>
</body>
</html>
执行上述代码后，将生成以下输出。
示例 2
这是一个使用 `insertBefore()` 方法在 JavaScript 中在现有子节点前插入子节点的示例程序。
<!DOCTYPE html>
<html>
<head>
<title>Insert a node as a child before an existing child in JavaScript</title>
</head>
<body style="text-align: center;">
<h4>Insert a node as a child before an existing child in JavaScript using insertBefore()</h4>
<div id="main">
<p id="p1">Education is the passport to the future, for tomorrow belongs to those who prepare for it today.</p>
<p id="p2">The roots of education are bitter, but the fruit is sweet.</p>
</div>
<script>
// Create an element and add it to the node
var p_node = document.createElement("p");
var NodeEle = document.createTextNode("An investment in knowledge pays the best interest.");
p_node.appendChild(NodeEle);
//Inserting an element before an existing
/*The difference between previous example and this example is , we are using parentNode attribute to get the parent of the element we are referring to*/
var ele = document.getElementById('p2');
var parent = ele.parentNode;
parent.insertBefore(p_node, ele);
</script>
</body>
</html>
执行上述代码后，将生成以下输出。
示例 3
这是一个使用 `insertBefore()` 方法在 JavaScript 中在现有子节点前插入子节点的示例程序。
<!DOCTYPE html>
<html>
<head>
<title>Insert a node as a child before an existing child in JavaScript</title>
</head>
<body style="text-align: center;">
<h4>Insert a node as a child from list 1 before a particular existing child in list 2 in JavaScript using insertBefore()</h4>
<p>List of Top Mobile Selling Companies</p>
<ul id="Mobiles">
<li>Apple</li>
<li>Samsung</li>
<li>One plus</li>
</ul>
<p>List of Top Laptop Selling Companies</p>
<ul id="Laptop">
<li>Dell</li>
<li>HP</li>
<li>Lenovo</li>
</ul>
<script>
// Placing an element from list1 into list2
var ele = document.getElementById('Mobiles').firstElementChild;
var list = document.getElementById('Laptop');
list.insertBefore(ele,list.children[2]);
</script>
</body>
</html>
执行上述代码后，将生成以下输出。
示例 4
这是一个使用 `insertBefore()` 方法在 JavaScript 中在现有子节点前插入子节点的示例程序。
<!DOCTYPE html>
<html>
<head>
<title>Insert a node as a child before an existing child in JavaScript</title>
</head>
<body style="text-align: center;">
<h4>Insert a last child from list 1 to the end in list 2 in JavaScript using insertBefore()</h4>
<p>List of Top Mobile Selling Companies</p>
<ul id="Mobiles">
<li>Samsung</li>
<li>One plus</li>
<li>Apple</li>
</ul>
<p>List of Top Laptop Selling Companies</p>
<ul id="Laptop">
<li>Dell</li>
<li>HP</li>
<li>Lenovo</li>
</ul>
<script>
// Moving the last child of list1 to the end of another list i.e. list2
var ele = document.getElementById('Mobiles').lastElementChild;
var list = document.getElementById('Laptop');
list.insertBefore(ele,null);
</script>
</body>
</html>
执行上述代码后，将生成以下输出。
使用 `insertBefore()` 方法后
更新于：2022年12月9日
676 次浏览
广告