DOM
Manipuler des éléments
Recherche…
Éléments de clonage
Un élément peut être cloné en cloneNode méthode cloneNode . Si le premier paramètre passé à cloneNode est true , les enfants de l'original seront également clonés.
var original = document.getElementsByTagName("li")[0];
var clone = original.cloneNode(true);
Ajouter un élément
Dans cet exemple, nous créons un nouvel élément de liste avec le texte "new text", et sélectionnons la première liste non ordonnée et son premier élément de liste.
let newElement = document.createElement("li");
newElement.innerHTML = "new text";
let parentElement = document.querySelector("ul");
let nextSibling = parentElement.querySelector("li");
Lors de l'insertion d'un élément, nous le faisons sous l'élément parent et juste avant un élément enfant particulier de cet élément parent.
parentElement.insertBefore(newElement, nextSibling);
Le nouvel élément est inséré sous
parentElementet juste avantnextSibling.
Quand on veut insérer un élément comme dernier élément enfant de parentElement , le second argument peut être null .
parentElement.insertBefore(newElement, null);
Le nouvel élément est inséré sous
parentElementtant que dernier enfant.
Au lieu de cela, appendChild() peut être utilisé pour simplement ajouter l'enfant aux enfants du nœud parent.
parentElement.appendChild(newElement);
Le nouvel élément est inséré sous
parentElementtant que dernier enfant.
Remplacement d'un élément
Dans cet exemple, nous créons un nouvel élément de liste avec le texte "new text", et sélectionnons la première liste non ordonnée et son premier élément de liste.
let newElement = document.createElement("li");
newElement.innerHTML = "new text";
let parentElement = document.querySelector("ul");
let nextSibling = parentElement.querySelector("li");
Pour remplacer un élément, nous utilisons replaceChild :
parentElement.replaceChild(newElement, nextSibling);
nextSiblingest supprimé du DOM. À sa place est maintenantnewElement.
Supprimer un élément
Un élément peut être supprimé en appelant remove() . Alternativement, on peut appeler removeChild() sur son parent. removeChild() a un meilleur support de navigateur que remove() .
element.remove();
element, et tous ses enfants, sont supprimés du DOM.
parentElement.removeChild(element);
element, et tous ses enfants, sont supprimés du DOM.
Dans tous les cas, on peut insérer ce noeud dans le DOM à un moment ultérieur tant qu'il y a encore des références à ce noeud.
Ajouter et ajouter des méthodes
JavaScript a maintenant les méthodes Append et Prepend présentes dans jQuery
L'avantage principal de append et prepend est différent de appendChild et insertBefore , il peut prendre n'importe quel nombre d'arguments, que ce soit un élément HTML ou un texte brut (qui sera converti en nœuds de texte).
Pour ajouter par exemple 1 div, 1 nœud de texte et 1 intervalle
document.body.append(document.createElement('div'),"Hello world",document.createElement('span'))
Cela changera la page à la structure suivante
<body>
.....(other elements)
<div></div>
"Hello World"
<span></span>
</body>
Pour ajouter le même dans le corps
Utilisation
document.body.prepend(document.createElement('div'),"Hello world",document.createElement('span'))
Cela changera la page à la structure suivante
<body>
<div></div>
"Hello World"
<span></span>
.....(other elements)
</body>
Notez que les supports de navigateur sont
Chrome 54+
Firefox 49+
Opera 39+
En savoir plus sur MDN