js manipule dynamiquement la méthode du nœud DOM-js tutoriel-php.cn

js manipule dynamiquement la méthode du nœud DOM

小云云

Libérer： 2018-03-16 16:38:26

original

2021 Les gens l'ont consulté

Cet article partage principalement avec vous la méthode js de manipulation dynamique des nœuds DOM. Il utilise principalement js pour contrôler l'ajout et la suppression de nœuds DOM et la suppression de nœuds DOM. J'espère que cela pourra aider tout le monde.

Contrôle js pour ajouter et supprimer des nœuds DOM

1. Ajouter un nœud dom

<p id="p1">
    <p id="p_1">我是第一个段落</p>
    <p id="p_2">我是第二个段落</p>
</p>

Copier après la connexion

Effet de navigateur

<🎜. > js manipule dynamiquement la méthode du nœud DOM

Commencez à écrire du code js

<script>    /*创建一个元素节点*/    var arr=document.createElement("p");   
 /*给元素增加文本节点*/    var txt=document.createTextNode("这是添加的文本");  
   /*把文本节点追加到元素节点上*/    arr.appendChild(txt);    
   /*找到一个存在的元素节点*/    var par=document.getElementById("p_1");  
     /*把新的元素节点追加到已存在的元素节点上*/    par.appendChild(arr);</script>

Copier après la connexion

Effet navigateur

js manipule dynamiquement la méthode du nœud DOM

Vous pouvez trouver l'élément parent et ajouter un nœud. Vous pouvez également trouver des éléments frères pour ajouter des nœuds. Lors de la recherche d'un élément parent, l'élément nouvellement ajouté sera ajouté à la fin de tous les éléments. Lors de la recherche d'un élément frère, l'élément nouvellement ajouté sera ajouté par défaut après l'élément sélectionné.

2. Supprimer les nœuds DOM

Pour supprimer un élément HTML, vous devez d'abord obtenir l'élément parent de l'élément :

<p id="p1">
    <p id="p_1">我是第一个段落</p>
    <p id="p_2">我是第二个段落</p>
</p>

Copier après la connexion

js manipule dynamiquement la méthode du nœud DOM

Rendu par navigateur

js manipule dynamiquement la méthode du nœud DOM

D'accord, c'est fait, merci d'avoir regardé.

Recommandations associées :

Résumé des opérations JavaScript natives sur les nœuds dom

Résumé des méthodes d'opération des nœuds DOM dans jQuery

Exemple de partage d'exercices de fonctionnement du sélecteur JQuery et des nœuds DOM

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!