Maison > Article > interface Web > Comment remplacer des nœuds en javascript

Comment remplacer des nœuds en javascript

WBOYoriginal: 2022-01-04 15:23:504244parcourir

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)".

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)

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

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>

Résultat de sortie :

Comment remplacer des nœuds en javascript

Après avoir cliqué sur le bouton :

Comment remplacer des nœuds en javascript

[Recommandations associées : Tutoriel d'apprentissage javascript]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript NULL

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment contrôler le masquage et l'affichage des éléments dans vueArticle suivant：Comment contrôler le masquage et l'affichage des éléments dans vue

Articles Liés

Voir plus