É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中文网(php.cn)</title>
</head>
<body>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("这是一个新段落。");
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中文网(php.cn)</title>
</head>
<body>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</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">这是一个段落。</p> <p id="p2">这是另一个段落。</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);
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
