Comment remplacer des nœuds en javascript-Questions et réponses frontales-php.cn

Comment remplacer des nœuds en javascript

WBOY

Libérer： 2022-01-04 15:23:50

original

4228 Les gens l'ont consulté

En JavaScript, vous pouvez utiliser la méthode replaceChild() pour remplacer un nœud. La fonction de cette méthode est de remplacer un certain nœud enfant par un autre. Le nouveau nœud peut être un nœud existant ou nouvellement créé. "node.replaceChild" (nouveau noeud, ancien noeud)".

Comment remplacer des nœuds en javascript

L'environnement d'exploitation de ce tutoriel : système Windows 10, JavaScript version 1.8.5, ordinateur Dell G3.

Comment remplacer un nœud par JavaScript

La méthode JavaScript replaceChild() peut remplacer un nœud enfant par un autre. L'utilisation est la suivante :

nodeObject.replaceChild(new_node, old_node)

Copier après la connexion

Le paramètre new_node est le nouveau nœud spécifié et old_node est le nœud remplacé. Si le remplacement réussit, le nœud remplacé est renvoyé ; si le remplacement échoue, null est renvoyé.

Exemple 1

Réécrivez le script en fonction de l'exemple ci-dessus, créez un nouvel élément de titre de deuxième niveau et remplacez l'élément de titre de premier niveau dans la case rouge.

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

Copier après la connexion

La démonstration a révélé qu'après avoir remplacé le titre de premier niveau par le titre de deuxième niveau nouvellement créé, le texte du titre contenu dans le titre original de premier niveau n'existe plus. Cela montre que l'opération de remplacement d'un nœud ne consiste pas à remplacer le nom de l'élément, mais à remplacer tous les nœuds enfants qu'il contient et tout le contenu qu'il contient.

De même, si le nœud de remplacement contient également des nœuds enfants, les nœuds enfants seront insérés ensemble dans le nœud remplacé. Vous pouvez remplacer un nœud existant par un autre nœud existant dans le document à l'aide de la méthode replaceChild().

L'exemple est le suivant :

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

Copier après la connexion

Résultat de sortie :

Comment remplacer des nœuds en javascript