Latest web development tutorials

éléments DOM HTML

Ajouter, supprimer et remplacer des éléments HTML.

Créer un nouvel élément HTML - appendChild ()

Pour ajouter un nouvel élément au DOM HTML, vous devez d'abord créer l'élément et l'ajouter aux éléments existants.

Exemples

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);
</script>

Essayez »

Des exemples d'analyses

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("This is a new paragraph.");

Ensuite, vous devez ajouter un nœud de texte à l'élément <p>:

para.appendChild(node);

Enfin, vous devez ajouter ce nouvel élément aux éléments existants.

Trouver ce code à un élément existant:

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

Le code pour ajouter un nouvel élément aux éléments existants:

element.appendChild(para);

Créer un nouvel élément HTML - insertBefore ()

Sur un exemple de méthode appendChild (), le nouvel élément en dernier élément enfant de l'élément parent à ajouter.

Si vous ne le souhaitez pas, vous pouvez utiliser la méthode insertBefore ():

Exemples

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

var element=document.getElementById("div1");
var child=document.getElementById("p1");
element.insertBefore(para,child);
</script>

Essayez »

Retirez les éléments HTML existants

Pour supprimer des éléments HTML, vous devez connaître l'élément parent de l'élément:

Exemples

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>


Essayez »

Des exemples d'analyses

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

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

Trouver id = éléments "div1":

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

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

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

Retirer de sous-éléments de l'élément parent:

parent.removeChild(child);

lampe Puis-je supprimer un élément dans le cas ne fait pas référence à l'élément de parent?
Désolé. DOM doivent comprendre les éléments que vous souhaitez supprimer, ainsi que son élément parent.

Voici une solution commune: pour trouver des sous-éléments dont vous avez besoin pour enlever, puis utiliser l'attribut parentNode pour trouver son élément parent:

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

Remplacer les éléments HTML

Pour remplacer les éléments DOM HTML, utilisez la méthode replaceChild ():

Exemples

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.replaceChild(para,child);
</script>

Essayez »