éléments DOM JavaScript HTML
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 (un nœud d'élément), puis ajouter l'élément à un élément existant.Exemples
<P id = "p1"> Ceci est un paragraphe. </ P>
<P id = "p2"> Ceci est un autre paragraphe. </ P>
</ Div>
<Script>
var = para document.createElement ( "p");
noeud var = document.createTextNode ( "Ceci est un nouveau paragraphe.");
para.appendChild (noeud);
var element = document.getElementById ( "div1");
element.appendChild (para);
</ Script>
Essayez »
Exemples d'analyse:
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 ce noeud de texte à l'élément <p>:
Enfin, vous devez ajouter ce nouvel élément à un élément existant.
Le code pour trouver un élément existant:
Le code suivant après les éléments existants ajouter un nouvel élément:
Retirez les éléments HTML existants
Le code suivant montre comment supprimer des éléments:
Exemples
<P id = "p1"> Ceci est un paragraphe. </ P>
<P id = "p2"> Ceci est un autre paragraphe. </ P>
</ Div>
<Script>
var parent = document.getElementById ( "div1");
var enfant = document.getElementById ( "p1");
parent.removeChild (enfant);
</ Script>
Essayez »
Des exemples d'analyses
Le document HTML contenant les nœuds enfants ont deux (deux élément <p>) de l'élément <div>:
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
Trouver id = éléments "div1":
Trouver id = "p1" l'élément <p>:
Retirer de sous-éléments de l'élément parent:
Si vous pouvez supprimer un élément sans une référence à l'élément parent, ce serait formidable. Mais malheureusement. éléments DOM que vous devez savoir à supprimer, ainsi que son élément parent. |
Ceci est une solution commune: trouver l'élément enfant que vous souhaitez supprimer, puis utiliser ses propriétés pour trouver l'élément parent parentNode:
child.parentNode.removeChild(child);
Tutoriel DOM HTML
Dans la partie HTML DOM de notre tutoriel JavaScript, vous avez appris:
- Comment changer le contenu de l'élément HTML (innerHTML)
- Comment changer le style des éléments HTML (CSS)
- Comment réagir aux événements sur le DOM HTML
- Comment puis-je ajouter ou supprimer des éléments HTML
Si vous voulez en savoir plus sur l' utilisation de JavaScript pour accéder à la connaissance HTML DOM, s'il vous plaît visitez notre complète tutoriel HTML DOM .