é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
<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>:
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:
Ensuite, vous devez ajouter un nœud de texte à l'élément <p>:
Enfin, vous devez ajouter ce nouvel élément aux éléments existants.
Trouver ce code à un élément existant:
Le code pour ajouter un nouvel élément aux éléments existants:
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
<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
<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:
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
Trouver id = éléments "div1":
Trouver id = "p1" l'élément <p>:
Retirer de sous-éléments de l'élément parent:
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:
child.parentNode.removeChild(child);
Remplacer les éléments HTML
Pour remplacer les éléments DOM HTML, utilisez la méthode replaceChild ():
Exemples
<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 »