Comment ajouter et supprimer des éléments en JavaScript-js tutoriel-php.cn

Comment ajouter et supprimer des éléments en JavaScript

醉折花枝作酒筹

Libérer： 2023-01-04 09:35:16

original

3713 Les gens l'ont consulté

Méthodes pour ajouter et supprimer des éléments dans JS : 1. Utilisez "appendChild("element name")" pour ajouter des éléments ; 2. Utilisez "insertBefore(element name, où ajouter l'élément)" pour l'ajouter. n'importe où Element; 3. Utilisez "removeChild("Element Name")" pour supprimer l'élément.

Comment ajouter et supprimer des éléments en JavaScript

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

Comment ajouter et supprimer des éléments en JavaScript

Pour ajouter un élément, vous devez d'abord créer un élément. Si vous souhaitez écrire. l'élément nouvellement ajouté Pour saisir du texte, vous devez créer un nœud de texte, puis insérer la valeur du nœud de texte dans l'élément nouvellement ajouté.

(1) createElement("element name") : Cette méthode peut créer un nouvel élément. Par exemple : createElement("p") signifie qu'une balise p (élément/paragraphe) est créée.

(2) createTextNode("text content") : Cette méthode peut créer un nœud de texte. Par exemple : createTextNode("Je suis un nouveau contenu") signifie qu'un nœud de texte avec la valeur "Je suis un nouveau contenu" est créé.

(3) appendChild("Element Name") : Ajoutez un nouvel élément. Par exemple : ul.appendChild("li") signifie ajouter un élément li à ul.

(4) removeChild("Element Name") : Supprime un élément. L’usage est opposé à (3).

L'exemple suivant ajoute dynamiquement l'élément li à ul, et l'ajoute devant le li d'origine à chaque fois.

<script>
      window.οnlοad=function () {
          var UL=document.getElementsByClassName(&#39;box&#39;)[0];
          var btn=document.getElementsByTagName(&#39;button&#39;);
          var index=1;  //序号计数器
          btn[0].οnclick=function () {    //创建新节点，并添加新元素,新添加的元素总是在最前面
              var li=document.createElement(&#39;li&#39;),  //创建li元素
                  content=&#39;我是第&#39;+index+&#39;个li&#39;;    //li元素的文本节点的内容
              var text=document.createTextNode(content);  //创建li元素的文本节点
              index++;   //每创建一个li计数就+1
              var Li=UL.getElementsByTagName(&#39;li&#39;);    //获取页面中的li集合
              UL.insertBefore(li,Li[0]),li.appendChild(text);  //在页面中第一个li前面添加新的li标签
          }
          btn[1].οnclick=function () {  //删除添加的元素
              var li=document.getElementsByTagName(&#39;li&#39;)[0];
              if(!index%2==0){
                  li.parentNode.removeChild(li);
              }
          }
      }
</script>
</head>
<body>
<button>点击添加新的li元素</button>
<button>点击删除li元素</button>
<ul class="box">
</ul>
</body>

Copier après la connexion

Remarque : Si vous souhaitez que chaque li nouvellement ajouté soit devant le li d'origine, vous devez utiliser la méthode insertBefore() .

insertBefore()Il contient deux valeurs de paramètre. La première valeur de paramètre est le nom de l'élément que vous souhaitez ajouter, et la deuxième valeur de paramètre est le nom de l'élément que vous souhaitez ajouter où. (la valeur peut être nulle, l'effet est le même que appendChild()).

Par exemple, dans l'exemple ci-dessus, je veux que l'élément li ajouté à chaque fois soit au premier plan. Ensuite, il vous suffit de modifier la quatrième étape :

var Li=UL.getElementsByTagName("li");
UL.insertBefore(li,Li[0]);li.appendChild(text);

Copier après la connexion

Autrement dit, il existe deux manières d'ajouter un nouvel élément : ①appendChild(), ②insertBefore(); pour supprimer un élément : removeChild()

Apprentissage recommandé : Tutoriel vidéo 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!