Latest web development tutorials

HTML DOM modification

Modifier HTML = éléments de changement, des attributs, des styles et des événements.

éléments Modifier HTML

Modifier HTML DOM signifie de nombreux aspects différents:

  • Modifier le contenu HTML
  • Changer de styles CSS
  • Modifiez les attributs HTML
  • Créer un nouvel élément HTML
  • Retirez les éléments HTML existants
  • Événement Change (gestionnaire)

Dans les sections suivantes, nous allons étudier en profondeur le DOM HTML pour modifier la méthode conventionnelle.

Créer un contenu HTML

La meilleure façon de modifier le contenu de l'élément est d'utiliser la propriété innerHTML.

L'exemple suivant modifie le contenu d'un HTML <p> élément:

Exemples

<html>
<body>

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML="New text!";
</script>

</body>
</html>

Essayez »

lampe Nous allons vous expliquer les détails de l'exemple dans les sections suivantes.

styles Changement HTML

A travers le DOM HTML, vous pouvez accéder aux éléments HTML de style d'objet.

L'exemple suivant pour changer un style de paragraphe HTML:

Exemples

<html>

<body>

<p id="p2">Hello world!</p>

<script>
document.getElementById("p2").style.color="blue";
</script>

</body>
</html>


Essayez »

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 (un nœud d'élément), puis l'ajouter aux éléments existants.

Exemples

<div id="d1">
<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("d1");
element.appendChild(para);
</script>

Essayez »