数据结构
网络
关系数据库管理系统 (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+ 次浏览
广告