éléments JavaScript HTML DOM (n?uds)
Créer un élément HTML
var newEle =document.createElement(p);
L'élément créé est ajouté aux autres éléments?:
A. appendChild(B) : Si B est un élément nouvellement créé, ajoutez l'élément B à la fin de tous les éléments enfants de l'élément A.
Si l'élément existe déjà dans la page B, l'effet de cette instruction est de déplacer l'élément B vers l'élément enfant de A.
appendChild() Cette fonction a des effets similaires à l'attribut innerHTML La différence est?:
1 innerHTML s'exécutera plus lentement que appendChild (peut-être parce qu'il doit être analysé)
2 innerHTML est plus pratique que appendChild, tout comme écrire une cha?ne
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <div id="div1"> <p id="p1">這是一個(gè)段落。</p> <p id="p2">這是另一個(gè)段落。</p> </div> <script> var para=document.createElement("p"); var node=document.createTextNode("這是一個(gè)新段落。"); para.appendChild(node); var element=document.getElementById("div1"); element.appendChild(para); </script> </body> </html>
Exemple d'analyse :
Ce code crée un nouvel élément
:
var para=document.createElement("p");
Pour ajouter du texte à l'élément
, 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 ajouter
L'élémentajoute ce n?ud de texte?:
para.appendChild(node);
Enfin, vous devez ajouter ce nouvel élément à un élément existant.
Ce code trouve un élément existant?:
var element=document.getElementById("div1");
Le code suivant est déjà Ajouter un nouveau éléments après les éléments existants?:
element.appendChild(para);
Supprimer l'élément HTML
La fonction Removechild peut supprimer l'élément enfant spécifié de l'élément parent.
Si cette fonction supprime avec succès le n?ud enfant, elle renvoie le n?ud supprimé, sinon elle renvoie null.
Structure de syntaxe?:
fatherObj.removeChild(childrenObj)
Explication du paramètre?:
1.fatherObj?:?l'objet élément de l'élément enfant à supprimer .
2.childrenObj?: L'objet élément enfant à supprimer.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <div id="div1"> <p id="p1">這是一個(gè)段落。</p> <p id="p2">這是另一個(gè)段落。</p> </div> <script> var parent=document.getElementById("div1"); var child=document.getElementById("p1"); parent.removeChild(child); </script> </body> </html>
Exemple d'analyse
Ce document HTML contient un élément <div> avec deux n?uds enfants (deux éléments <p>)?:
<div id="div1"> <p id="p1">這是一個(gè)段落。</p> <p id="p2">這是另一個(gè)段落。</p> </div>
Trouver l'élément avec id="div1":
var parent=document.getElementById("div1");
Trouver le
var child=document.getElementById("p1");
Supprimer l'élément enfant de l'élément parent?:
parent.removeChild(child);