Home >Web Front-end >Front-end Q&A >How to replace nodes in javascript

How to replace nodes in javascript

WBOYOriginal: 2022-01-04 15:23:504288browse

In JavaScript, you can use the replaceChild() method to replace a node. The function of this method is to replace a certain child node with another. The new node can be an existing one or a newly created one. The syntax is: "node.replaceChild(newnode,oldnode)".

The operating environment of this tutorial: Windows 10 system, JavaScript version 1.8.5, Dell G3 computer.

How to replace a node in JavaScript

The JavaScript replaceChild() method can replace a child node with another. The usage is as follows:

nodeObject.replaceChild(new_node, old_node)

The parameter new_node is the specified new node, and old_node is the replaced node. If the replacement is successful, the replaced node is returned; if the replacement fails, null is returned.

Example 1

Rewrite the script based on the above example, create a new second-level title element and replace the first-level title element in the red box.

var ok = document.getElementById("ok");  //获取按钮元素的引用
ok.onclick = function () {  //为按钮注册一个鼠标单击事件处理函数
    var red = document.getElementById("red");  //获取红色盒子的引用
    var h1 = document.getElementsByTagName("h1")[0];  //获取一级标题的引用
    var h2 = documeng.createElement("h2");  //创建二级标题元素并引用
    red.replaceChild(h2, h1);  //把一级标题替换为二级标题
}

The demonstration found that when the first-level title is replaced with the newly created second-level title, the title text contained in the original first-level title no longer exists. This shows that the operation of replacing a node is not to replace the element name, but to replace all the child nodes it contains and all the content it contains.

Similarly, if the replacement node also contains child nodes, the child nodes will be inserted into the replaced node together. You can replace an existing node with another existing node in the document with the help of the replaceChild() method.

The example is as follows:

<html>
<head>
<meta charset="utf-8">
<title>123</title>
</head>
<body>
<ul id="myList"><li>Coffee</li><li>Tea</li><li>Milk</li></ul>
<p id="demo">单击按钮替换列表中的第一项。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
var textnode=document.createTextNode("Water");
var item=document.getElementById("myList").childNodes[0];
item.replaceChild(textnode,item.childNodes[0]);
}
</script>
<p>首先创建一个文本节点。<br>然后替换第一个列表中的第一个子节点。</p>
<p><strong>注意:</strong>这个例子只将文本节点的文本节点“Coffee”替换为“Water”,而不是整个LI元素,这也是替换节点的一种备选。</p>
</body>
</html>

Output result:

How to replace nodes in javascript

After clicking the button:

How to replace nodes in javascript

[Related recommendations: javascript learning tutorial]

The above is the detailed content of How to replace nodes in javascript. For more information, please follow other related articles on the PHP Chinese website!

JavaScript NULL

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to control the hiding and display of elements in vueNext article：How to control the hiding and display of elements in vue

See more

How to replace nodes in javascript

Related articles