資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會研究
服裝研究
法律研究在 JavaScript 中用新節點替換子節點？
在這篇文章中，我們將學習如何用合適的例子在 JavaScript 中用新節點替換子節點。
要將子節點替換為新節點，可以使用內建方法在給定的父節點內將新節點替換為舊節點。內建方法包括 – replaceChild()，replaceWith()。
方法replaceChild()，replaceWith()受所有現代瀏覽器支援，並且它們也是 DOM Level1 的特性。
為了更好地理解這個概念，讓我們看一下 JavaScript 中 replaceChild() 和 replaceWith() 方法的語法和用法。
語法
replaceChild()方法的語法為：
replaceChild(newNode,oldNode);
其中
newNode 是要插入以代替 oldNode 的節點。
oldNode 是要替換的節點。
此方法返回已被替換的節點，即 oldNode。
示例 1
這是一個示例程式，用於在 JavaScript 中用新節點替換子節點（即列表的第一個元素舊節點）。
<!DOCTYPE html>
<html>
<head>
<title>Replace a child node with a new node in JavaScript</title>
</head>
<body style="text-align: center;">
<h3>Replace a child node with a new node in JavaScript using replaceChild()</h3>
<ul id="Cars">
<li>Maruti</li>
<li>Hyundai</li>
<li>Toyota</li>
</ul>
<p>Click "Replace" to replace the item.</p>
<button onclick="replaceFunction()">"Replace"</button>
<script>
function replaceFunction() {
const old1 = document.getElementById("Cars").children[0]; // Selecting the 1st item in the list 'Cars'
const new1 = document.createTextNode("KIA");
old1.replaceChild(new1, old1.childNodes[0]); // Replacing the first child in the list 'Cars' with new1 element
}
</script>
</body>
</html>
執行上述程式碼後，將生成以下輸出。
示例 2
這是一個示例程式，用於在 JavaScript 中用新節點替換子節點（即列表的最後一個元素舊節點）。
<!DOCTYPE html>
<html>
<head>
<title>Replace a child node with a new node in JavaScript</title>
</head>
<body style="text-align: center;">
<h3>Replace a child node with a new node in JavaScript using replaceChild()</h3>
<ul id="Cars">
<li id="car1">Maruti</li>
<li id="car2">Hyundai</li>
<li id="car3">Toyota</li>
</ul>
<p>Click "Replace" to replace the item.</p>
<button onclick="replaceFunction()">"Replace"</button>
<script>
function replaceFunction() {
const new1 = document.createElement("li");
new1.appendChild(document.createTextNode("KIA"));
const list = document.getElementById("Cars");
const old1 = list.lastElementChild; //Selecting the last child of the list 'Cars'
const parent = old1.parentNode;
parent.replaceChild(new1, old1); // Replacing the first child in the list 'Cars' with new1 element
}
</script>
</body>
</html>
執行上述程式碼後，將生成以下輸出。
示例 3
這是一個示例程式，用於在 JavaScript 中使用replaceWith()方法用新節點替換子節點（即列表的第一個子節點舊節點）。
<!DOCTYPE html>
<html>
<head>
<title>Replace a child node with a new node in JavaScript</title>
</head>
<body style="text-align: center;">
<h3>Replace a child node with a new node in JavaScript using replaceWith()</h3>
<ul id="laptop">
<li>Dell</li>
<li>HP</li>
<li>Lenovo</li>
<li>ASUS</li>
</ul>
<p>Click "Replace" to replace the item.</p>
<button onclick="replaceFunction()">"Replace"</button>
<script>
function replaceFunction() {
const old1 = document.getElementById("laptop").firstElementChild; // Selecting the first child in the list 'laptop'
const new1 = document.createTextNode("Macbook");
old1.replaceWith(new1); // Replacing the first child in the list 'laptop' with new1 element
}
</script>
</body>
</html>
執行上述程式碼後，將生成以下輸出。
更新於：2022-12-09
3K+ 次瀏覽
廣告