資料結構
網路
關係資料庫管理系統 (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 次瀏覽
廣告