Éléments DOM


Créer un nouvel élément HTML

Créer un nouvel élément HTML

Pour ajouter un nouvel élément au DOM HTML, vous devez d'abord créer l'élément (nœud d'élément ) , puis ajoute l'élément à un élément existant.


Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("这是一个新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Exemple d'analyse :

Ce code crée un nouvel élément <p> :

var para=document.createElement (" p");

Pour ajouter du texte à l'élément <p>, vous devez d'abord créer un nœud de texte. Ce code crée un nœud de texte :

var node=document.createTextNode("Ceci est un nouveau paragraphe.");

Ensuite, vous devez < L'élément ; ajoute ce nœud de texte :

para.appendChild(node);

Enfin, vous devez ajouter le nouvel élément à un élément existant.

Ce code trouve un élément existant :

var element=document.getElementById("div1");

Le code suivant ajoute un nouvel élément après l'élément existant :

element.appendChild(para);

Supprimer les éléments HTML existants

Le code suivant montre comment supprimer des éléments :

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<div id="div1">
	<p id="p1">这是一个段落。</p>
	<p id="p2">这是另一个段落。</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Analyse d'instance

Ce document HTML contient un élément <div> avec deux nœuds enfants (deux éléments <p>) :

<div id="div1">
<p id="p1">Ceci est un paragraphe. </p>
<p id="p2"> Ceci est un autre paragraphe. </p>
</div>

Trouver l'élément avec id="div1":

var parent=document.getElementById("div1 " );

Recherchez l'élément <p> avec id="p1":

var child=document.getElementById("p1");

Supprimer les éléments enfants des éléments parents :

parent.removeChild(child);

lampCe serait bien de pouvoir supprimer un élément sans référencer l'élément parent. Très bien.
lamp如果能够在不引用父元素的情况下删除某个元素，就太好了。
不过很遗憾。DOM 需要清楚您需要删除的元素，以及它的父元素。
Mais c'est dommage. Le DOM doit connaître l'élément que vous devez supprimer et son élément parent.

Il s'agit d'une solution courante : recherchez l'élément enfant que vous souhaitez supprimer, puis utilisez sa propriété parentNode pour trouver l'élément parent :

var child=document.getElementById("p1");
child.parentNode.removeChild(child);

Tutoriel HTML DOM

Dans notre Dans la partie HTML DOM du tutoriel JavaScript, vous avez appris :

  • Comment modifier le contenu des éléments HTML (innerHTML)

  • Comment pour changer les styles des éléments HTML (CSS)

  • Comment réagir aux événements HTML DOM

  • Comment ajouter ou supprimer des éléments HTML

Si vous souhaitez en savoir plus sur l'accès au HTML DOM à l'aide de JavaScript, visitez notre tutoriel complet HTML DOM.