Heim > Artikel > Web-Frontend > So ersetzen Sie Knoten in Javascript

So ersetzen Sie Knoten in Javascript

WBOYOriginal: 2022-01-04 15:23:504244Durchsuche

In JavaScript können Sie die Methode „replaceChild()“ verwenden, um einen bestimmten untergeordneten Knoten durch einen anderen zu ersetzen. Die Syntax ist „node.replaceChild“ (newnode,oldnode)“.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, JavaScript-Version 1.8.5, Dell G3-Computer.

So ersetzen Sie einen Knoten mit JavaScript

Die JavaScript-Methode replaceChild() kann einen untergeordneten Knoten durch einen anderen ersetzen. Die Verwendung ist wie folgt:

nodeObject.replaceChild(new_node, old_node)

Der Parameter new_node ist der angegebene neue Knoten und old_node ist der ersetzte Knoten. Wenn die Ersetzung erfolgreich ist, wird der ersetzte Knoten zurückgegeben; wenn die Ersetzung fehlschlägt, wird null zurückgegeben.

Beispiel 1

Schreiben Sie das Skript basierend auf dem obigen Beispiel neu, erstellen Sie ein neues Titelelement der zweiten Ebene und ersetzen Sie das Titelelement der ersten Ebene im roten Feld.

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);  //把一级标题替换为二级标题
}

Die Demonstration ergab, dass nach dem Ersetzen des Titels der ersten Ebene durch den neu erstellten Titel der zweiten Ebene der im ursprünglichen Titel der ersten Ebene enthaltene Titeltext nicht mehr vorhanden ist. Dies zeigt, dass der Vorgang des Ersetzens eines Knotens nicht darin besteht, den Elementnamen zu ersetzen, sondern alle darin enthaltenen untergeordneten Knoten und den gesamten darin enthaltenen Inhalt.

Wenn der Ersatzknoten auch untergeordnete Knoten enthält, werden die untergeordneten Knoten ebenfalls zusammen in den ersetzten Knoten eingefügt. Sie können die Methode „replaceChild()“ verwenden, um einen vorhandenen Knoten durch einen anderen vorhandenen Knoten im Dokument zu ersetzen.

Das Beispiel sieht wie folgt aus:

<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>

Ausgabeergebnis:

So ersetzen Sie Knoten in Javascript

Nach dem Klicken auf die Schaltfläche:

So ersetzen Sie Knoten in Javascript

[Verwandte Empfehlungen: Javascript-Lerntutorial]

Das obige ist der detaillierte Inhalt vonSo ersetzen Sie Knoten in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript NULL

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So steuern Sie das Ausblenden und Anzeigen von Elementen in VueNächster Artikel：So steuern Sie das Ausblenden und Anzeigen von Elementen in Vue

In Verbindung stehende Artikel

Mehr sehen