Latest web development tutorials
×

JavaScript cours

JavaScript cours JavaScript Brève introduction JavaScript usage JavaScript exportation JavaScript grammaire JavaScript Déclarations JavaScript note JavaScript variable JavaScript Types de données JavaScript Objets JavaScript fonction JavaScript portée JavaScript événement JavaScript chaîne JavaScript opérateurs JavaScript comparer JavaScript If...Else JavaScript switch JavaScript for JavaScript while JavaScript Break & Continue JavaScript typeof JavaScript Type de conversion JavaScript expressions régulières JavaScript erreur JavaScript debugging JavaScript ascenseur variable JavaScript Strict mode JavaScript utilisation inappropriée JavaScript Authentification Forms JavaScript Mots clés réservés JavaScript JSON JavaScript void JavaScript Spécification code

JS fonction

JavaScript Définition de la fonction JavaScript Arguments de la fonction JavaScript appel de fonction JavaScript fermetures

JS HTML DOM

DOM Brève introduction DOM HTML DOM CSS DOM événement DOM EventListener DOM élément

JS Tutorial avancée

JavaScript Objets JavaScript Number JavaScript String JavaScript Date JavaScript Array JavaScript Boolean JavaScript Math JavaScript RegExp Objets

JS Navigateur BOM

JavaScript Window JavaScript Window Screen JavaScript Window Location JavaScript Window History JavaScript Navigator JavaScript pop JavaScript événement Timed JavaScript Cookies

JS entrepôt

JavaScript entrepôt JavaScript test jQuery JavaScript test Prototype

JS Exemples

JavaScript Exemples JavaScript instance de l'objet JavaScript instance d'objet du navigateur JavaScript HTML DOM Exemples JavaScript résumé

JS Manuel de référence

JavaScript Objets HTML DOM Objets

é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

<Div id = "div1">
<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>:

var para=document.createElement("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:

noeud var = document.createTextNode ( "Ceci est un nouveau paragraphe.");

Ensuite, vous devez ajouter ce noeud de texte à l'élément <p>:

para.appendChild (noeud);

Enfin, vous devez ajouter ce nouvel élément à un élément existant.

Le code pour trouver un élément existant:

var element = document.getElementById ( "div1");

Le code suivant après les éléments existants ajouter un nouvel élément:

element.appendChild (para);


Retirez les éléments HTML existants

Le code suivant montre comment supprimer des éléments:

Exemples

<Div id = "div1">
<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>:

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

Trouver id = éléments "div1":

var parent = document.getElementById ( "div1");

Trouver id = "p1" l'élément <p>:

var child=document.getElementById("p1");

Retirer de sous-éléments de l'élément parent:

parent.removeChild(child);

lampe 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:

var child=document.getElementById("p1");
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 .