Création, ajout et suppression d'éléments de page HTML. Remove - Comment insérer un élément après un autre élément en JavaScript sans utiliser de bibliothèque ? Ajout d'un élément js

Dans cette leçon, nous apprendrons comment créer des nœuds d'éléments (createElement) et des nœuds de texte (createTextNode). Nous considérerons également des méthodes conçues pour ajouter des nœuds à l'arborescence (appendChild, insertBefore) et pour supprimer des nœuds de l'arborescence (removeChild).

Ajout de nœuds à une arborescence

L'ajout d'un nouveau nœud à une arborescence s'effectue généralement en 2 étapes :

Créez le nœud requis à l'aide de l'une des méthodes suivantes :

• createElement() - crée un élément (nœud) avec le nom (balise) spécifié. La méthode createElement(element) a un paramètre obligatoire (element) - il s'agit d'une chaîne contenant le nom de l'élément (tag) à créer. Le nom de l'élément (tag) dans le paramètre doit être en majuscules. En conséquence, cette méthode renvoie l'élément qui a été créé.
• createTextNode() - crée un nœud de texte avec le texte spécifié. La méthode createTextNode(text) a un paramètre obligatoire (texte) : il s'agit d'une chaîne contenant le texte du nœud de texte. Par conséquent, cette méthode renvoie le nœud de texte créé.

Spécifiez l'emplacement dans l'arborescence où le nœud doit être inséré. Pour ce faire, vous devez utiliser l'une des méthodes suivantes :

• appendChild() - ajoute un nœud comme dernier enfant de l'élément sur lequel cette méthode est appelée. La méthode appendChild(node) a un paramètre obligatoire : le nœud que vous souhaitez ajouter. En conséquence, cette méthode renvoie le nœud ajouté.
• insertBefore() - insère un nœud en tant que nœud enfant de l'élément sur lequel cette méthode est appelée. La méthode insertBefore(newNode,existingNode) a deux paramètres : newNode (obligatoire) est le nœud que vous souhaitez ajouter, existantNode (facultatif) est le nœud enfant de l'élément avant lequel vous souhaitez insérer le nœud. Si le deuxième paramètre (existingNode) n'est pas spécifié, alors cette méthode l'insérera à la fin, c'est-à-dire comme dernier nœud enfant de l'élément pour lequel cette méthode est appelée. La méthode insertBefore() renvoie le nœud inséré comme résultat.

Par exemple:

• Ordinateur
• Ordinateur portable
• Tablette

Considérons un exemple plus complexe dans lequel on ajoute à l'arborescence un nœud LI contenant un nœud texte avec le texte « Smartphone » à la fin de la liste ul.

Pour ce faire, vous devez procéder comme suit :

Créez un élément (nœud) LI.

Créez un nœud de texte contenant le texte "Smartphone".

Ajoutez le nœud de texte créé comme dernier nœud enfant de l'élément LI nouvellement créé

Ajoutez le nœud LI nouvellement créé comme dernier nœud enfant de l'élément ul

//crée un élément (nœud) li var elementLI = document.createElement("li"); //crée un nœud de texte contenant le texte "Smartphone" var textSmart= document.createTextNode("Smartphone"); //ajoute le nœud de texte créé en tant que dernier élément enfant à l'élément LI nouvellement créé elementLI.appendChild(textSmart); //récupère l'élément auquel le nœud li créé sera ajouté en tant qu'enfant var elementUL = document.getElementById("list"); //ajoute l'élément li créé comme dernier élément enfant à l'UL avec id="list" elementUL.appendChild(elementLI);

Méthodes AppendChild() et insertBefore() lorsque vous travaillez avec des nœuds existants

Le travail avec les nœuds existants à l'aide des méthodes appendChild() et insertBefore() s'effectue également en 2 étapes :

Obtenez un nœud existant dans l'arborescence.

Spécifiez l'emplacement où le nœud doit être inséré à l'aide de la méthode appendChild() ou insertBefore(). Cela supprimera le nœud de son emplacement précédent.

Par exemple, ajoutez un élément li existant contenant le texte « Tablette » au début de la liste (cela le supprimera de l'emplacement précédent) :

//récupère l'élément UL contenant la liste par son identifiant var elementUL = document.getElementById("list"); //récupère l'élément li contenant le nœud texte "Tablet" var elementLI = elementUL.childNodes; //ajoute un élément au début de la liste //dans ce cas, il sera supprimé de son emplacement d'origine elementUL.insertBefore(elementLI,elementUL.firstChild);

Exercice

• Il y a deux listes dans le document. Vous devez déplacer les éléments de la deuxième liste vers la première.
• Créez une liste, un champ de texte et 2 boutons. Écrivez du code en JavaScript qui, selon le bouton enfoncé, ajoute le texte du champ de texte au début ou à la fin de la liste.

Suppression de nœuds

La suppression d'un nœud d'un arbre s'effectue en 2 étapes :

Obtenez (trouvez) ce nœud dans l'arborescence. Cette action est généralement effectuée par l'une des méthodes suivantes : getElementById() , getElementsByClassName() , getElementsByTagName() , getElementsByName() , querySelector() ou querySelectorAll() .

Appelez la méthode removeChild() sur le nœud parent, auquel il faut passer en paramètre le nœud que l'on souhaite lui supprimer.
La méthode RemoveChild() renvoie le nœud supprimé comme valeur, ou null si le nœud que nous voulions supprimer n'existait pas.

//trouver le nœud que nous voulons supprimer var findElement = document.getElementById("notebook"); //appelle la méthode RemoveChild sur le nœud parent //et lui passe le nœud trouvé en paramètre findElement.parentNode.removeChild(findElement);

Par exemple, supprimez le dernier élément enfant d'un élément qui a id="myID" :

//récupère l'élément qui a id="myID" var myID = document.getElementById("myID"); //récupère le dernier nœud enfant de l'élément myID var lastNode = myID.lastChild; //parce que nous ne savons pas si le dernier nœud enfant de l'élément est un élément, // alors nous utiliserons une boucle while pour trouver le dernier enfant de l'élément myID // tant que l'élément a un nœud et que son type n'est pas 1 (c'est-à-dire que ce n'est pas un élément) exécuter while (lastNode && lastNode.nodeType!=1) ( //aller au nœud précédent lastNode = lastNode.previousSibling; ) //si nous avons trouvé un élément au nœud myID if (lastNode) ( //puis il doit être supprimé lastNode.parentNode.removeChild( lastNode); )

Par exemple, supprimez tous les nœuds enfants d'un élément qui a id="myQuestion" :

//récupère l'élément dont nous voulons supprimer tous ses nœuds enfants var elementQuestion = document.getElementById("myQuestion"); // tant qu'il y a le premier élément while (elementQuestion.firstElement) ( //supprimez-le elementQuestion.removeChild(element.firstChild); )

Exercice

Écrivez une fonction qui supprime tous les nœuds de texte d'un élément.

Il y a 2 listes (), écrivez un code JavaScript qui supprime tous les éléments des listes 1 et 2.

Ceci est la quatrième partie des articles consacrée aux équivalents natifs des méthodes jQuery. Vous voudrez peut-être lire ceci avant de continuer.

Dans cet article, nous examinerons les moyens de créer, insérer, déplacer et supprimer des éléments. Et bien que jQuery contienne déjà un grand nombre de méthodes utiles, vous serez surpris d'apprendre que tout cela peut être facilement réalisé en utilisant des méthodes natives.

Manipulation du code HTML des éléments jQuery // get var html = $(elem).html(); // set $(elem).html("Nouveau html"); JS natif // obtenez var html = elem.innerHTML ; // set elem.innerHTML = "Nouveau HTML" ; Manipulation du texte des éléments jQuery // get var text = $(elem).text(); // set $(elem).text("Nouveau texte"); JS natif // récupère var text = elem.textContent; // set elem.textContent = "Nouveau texte" ; Création d'un élément jQuery $(""); document.createElement natif JS("div"); Ajoute du contenu à la fin des éléments jQuery $(parentNode).append(newNode); JS natif parentNode.appendChild(newNode); Ajoute du contenu au début des éléments jQuery $(referenceNode).prepend(newNode); ReferenceNode.insertBefore JS natif (newNode, referenceNode.firstElementChild); // ou referenceNode.insertAdjacentElement("afterbegin", newNode); // FF 48.0+, IE8+ Insérer directement avant un élément jQuery $(referenceNode).before(newNode); JS natif referenceNode.parentNode.insertBefore(newNode, referenceNode); // ou referenceNode.insertAdjacentElement("beforebegin", newNode); // FF 48.0+, IE8+ Insérer directement après un élément jQuery $(referenceNode).after(newNode); JS natif referenceNode.parentNode.insertBefore(newNode, referenceNode.nextElementChild); // ou referenceNode.insertAdjacentElement("afterend", newNode); //FF 48.0+, IE8+

Remarque : "beforebegin" et "afterend" ne fonctionneront que si le referenceNode se trouve dans l'arborescence DOM et possède un élément parent.

Regardez ce qui suit :

ReferenceNode.insertAdjacentElement(position, nœud);

La méthode insertAdjacentElement prend deux paramètres :

• position - position par rapport à referenceNode, doit être l'un des éléments suivants :
  • 'beforebegin' - Avant l'élément lui-même.
  • 'afterbegin' — À l'intérieur de l'élément, avant le premier enfant.
  • 'beforeend' - À l'intérieur de l'élément, après le dernier enfant.
  • 'afterend' - Après l'élément lui-même.
• node — nœud à insérer

Contenu du texte

Du texte Du texte var elem1 = document.getElementById("elem1"); var elem2 = document.getElementById("elem2"); elem1.insertAdjacentElement("avant", elem2); // résultat Un peu de texteUn peu de texte

La méthode insertAdjacentElement est plus propre et plus intuitive que la méthode insertBefore, mais cette dernière est mieux prise en charge dans les anciens navigateurs.

Ajouter des éléments plusieurs fois

Il convient également de noter que l'ajout d'un élément à un nœud situé dans l'arborescence DOM entraînera un redessin. Ce n'est pas très bon car le navigateur doit recalculer la taille et la position du nouvel élément, ce qui entraînera également des modifications dans les descendants, les ancêtres et les éléments qui apparaissent après lui dans le DOM. Si vous ajoutez beaucoup d'éléments au DOM, cela peut prendre un certain temps.

Pour éviter cela, vous pouvez l'ajouter avec DocumentFragment. Un fragment de document est un objet de document qui existe uniquement en mémoire, donc y ajouter n'entraînera aucune redistribution.

Disons que nous devons ajouter 100 éléments li à un élément ul présent dans l'arborescence DOM :

// Récupère l'élément qui contiendra nos éléments var ul = document.querySelector("ul"); // crée 100 éléments de liste pour (var i = 1; i< 100; i++) { var li = document.createElement("li"); // append the new list element to the ul element ul.appendChild(li); }

Dans l'exemple ci-dessus, les éléments li sont ajoutés directement à l'élément ul, qui est situé dans l'arborescence DOM, ce qui entraînera un redessin à chaque itération - cela représente 100 changements !

Trouvons une meilleure façon.

// Récupère l'élément qui contiendra nos éléments var ul = document.querySelector("ul"); // crée un fragment de document pour ajouter les éléments de la liste à var docFrag = document.createDocumentFragment(); // crée 100 éléments de liste pour (var i = 1; i< 100; i++) { var li = document.createElement("li"); // append the new list element to the fragment docFrag.appendChild(li); } // append the fragment to the ul element ul.appendChild(docFrag);

Dans le même exemple, les éléments li sont ajoutés au fragment de document en mémoire, de sorte que la redistribution se déclenche lorsque le fragment est ajouté à l'élément ul. Cette méthode réduira le nombre de redessins de 100 à 1.

Suppression d'un élément jQuery $(referenceNode).remove(); JS natif referenceNode.parentNode.removeChild(referenceNode); // ou referenceNode.remove(); // FF 23.0+, 23.0+, Edge (pas de support IE)

Si vous avez besoin de créer un élément HTML et que vous ne savez pas comment l'implémenter, alors vous êtes au bon endroit. Cet article examinera non seulement un exemple de création d'un élément, mais écrira également une fonction universelle avec laquelle vous pouvez créer un nouvel élément, lui ajouter divers attributs et le remplir de texte.

Mais commençons d’abord par quelque chose de simple. En créant un nouvel élément, nous utiliserons les méthodes de l'objet DOM, à savoir :

* document.createElement(param) - cette méthode est utilisée directement pour créer un élément. En paramètre, il prend le nom de l'élément en cours de création. Renvoie un lien vers l'élément créé.

document.createElement('div'); // créera un élément div.

* document.appendChild(param) – cette méthode est utilisée pour ajouter un élément au code HTML. Prend un lien vers l'élément créé en tant que paramètre ;

var parent = document.getElementsByTagName("BODY"); //obtient un lien vers l'élément body

var elem = document.createElement('div');// créera un élément div

parent.appendChild(elem); // ajoute un élément, où parent est le lien où notre élément sera ajouté, dans ce cas c'est le body body;

* document.createTextNode() - la méthode est utilisée pour placer du texte à l'intérieur d'un élément.

Un exemple de création d'un élément.

fonction createElem() (

Var newP = document.createElement("p");

NewP.className = "elemClass" ;

NewP.id = "monPId" ;

NouveauP.style.width = "100px";

NouveauP.style.height = "300px";

NouveauP.style.background = "#c5c5c5";

NouveauP.style.color = "#000" ;

Var text = "texte à insérer";

Var textNode = document.createTextNode(text);

NewP.appendChild(textNode);

Parent.appendChild(newP);

Dans la fonction createElem, la variable parent est une référence à l'élément (corps) dans lequel le nouvel élément sera placé. Ensuite, un nouvel élément P est créé, les attributs id, class, style y sont ajoutés et les valeurs de ces attributs sont définies. Ensuite, un nœud de texte est créé et ajouté à notre nouvel élément. Après tout cela, l'élément lui-même est ajouté au corps du corps. Pour créer un grand nombre de nouveaux éléments, vous devrez travailler dur, car... vous devrez peut-être les placer à différents endroits de la page Web, par ex. attacher à différents éléments.

Un exemple de création d'un élément à l'aide d'une fonction universelle.

Cette fonction vous aidera à créer un nouvel élément, à lui ajouter divers attributs, à y attacher un nœud de texte, à le placer avant ou après l'élément spécifié ou à remplacer l'élément par un élément nouvellement créé. Seul l'argument nom est requis.

function createElement (nom, attributs, style, texte, past_id, position, modifié) (

Var parent = document.getElementsByTagName("BODY");

Var e = document.createElement(nom);

Si (attrs) (

Pour (saisir les attributs) (

Si (clé == "classe") (

E.className = attrs;

) sinon if (key == "id") (

E.id = attrs;

) autre (

E.setAttribute(clé, attrs);

Si (style) (

Pour (clé avec style) (

E.style = style;

Si (texte) (

E.appendChild(document.createTextNode(text));

Parent.appendChild(e);

Si(pass_id)(

Var old_elem = document.getElementById(past_id);

Si(position=="avant")(

Parent.insertBefore(e,old_elem)

)sinon si(position=="après")(

InsertAfter(parent,e,old_elem);

Si(changé!="" && changé==true)(

Parent.removeChild(old_elem);

Possibilités :

Nom – nom de l'élément ;

Attrs – attributs de l'élément créé ;

Style – styles de l'élément créé ;

Texte – texte inséré ;

Past_id – identifiant de l'élément à côté duquel notre élément sera situé ;

Position - peut prendre deux valeurs avant, après ;

Modifié – un indicateur qui prend deux valeurs : vrai ou faux. Si ce paramètre est défini sur vrai, l'ancien élément sera remplacé par un nouveau ;

À titre d'exemple, créons un élément DIV avec des attributs et remplaçons l'ancien élément par le nouvel élément créé.

createElement("div",

("class": "myDivCSSClass", "id": "myDivId", "align": "center"),

("width": "200px", "height": "250px", "background": "#3B9D00", "color": "#fff"),

"voici mon texte",

"test",

"avant"

Si vous avez déjà écrit du JavaScript et que vous avez dû écrire quelque chose comme :
var p = document.createElement("p");
p.appendChild(document.createTextNode("Vrai poisson."));
var div = document.createElement("div");
div.setAttribute("id", "nouveau");
div.appendChild(p);

alors cela peut vous être utile.

Problème : lorsque vous créez plusieurs éléments imbriqués les uns dans les autres, le code devient très complexe.

Je propose un outil simple pour résoudre le problème - la fonction create() (code source ci-dessous). Par exemple, créons un paragraphe de texte :
var el = create("p", ( ), "Adieu, amour !");

Ou un div avec un paragraphe et un lien à l'intérieur :
var div = create("div", ( identifiant : "nouveau", style : "background:#fff" ),
create("p", ( aligner: "center" ),
"introduction: ",
create("a", ( href: "ua.fishki.net/picso/kotdavinchi.jpg" ),
"image"),
": fin")
);

Ou ici on fait un tableau :
var titulaire = document.getElementById("holder2");
table var;
var td;
titulaire.appendChild(
tableau =
create("table", (id: "moche", cols:3),
créer("corps", (),
créer("tr", (),
create("td", ( largeur : "10%" ),
"Bonjour"),
td =
create("td", ( style : "background: #fcc" ),
"là")
create("td", ( Classe : "special2"), "partout")
)
);

Veuillez noter : 1. IE nécessite un élément tbody, sinon il refuse d'afficher le tableau.
2. L'attribut class est en conflit avec quelque chose, vous devez donc l'écrire en tant que Class. Cela ne semble pas avoir d'effet sur le résultat.
3. table = et tr = dans l'exemple vous permettent de sauvegarder les objets imbriqués créés pour un travail ultérieur avec eux.
4. Ce code fonctionne dans IE, Mozilla et Opera. La fonction elle-même function create(name, attributs) (
var el = document.createElement(nom);
if (type d'attributs == "objet") (
pour (var i dans les attributs) (
el.setAttribute(i, attributs[i]);

Si (i.toLowerCase() == "classe") (
el.className = attributs[i]; // pour la compatibilité avec IE

) sinon if (i.toLowerCase() == "style") (
el.style.cssText = attributs[i]; // pour la compatibilité avec IE
}
}
}
pour (var je = 2;je< arguments.length; i++) {
var val = arguments[i];
if (typeof val == "string") ( val = document.createTextNode(val) );
el.appendChild(val);
}
retourner el;
}

Nous devrions remercier Ivan Kurmanov pour l'idée,
Article original avec des exemples concrets :

Bonjour! En utilisant JavaScript, vous pouvez non seulement rechercher des éléments sur une page (découvrez comment procéder), mais également créer des éléments de manière dynamique et les ajouter au DOM. Comment procéder sera discuté dans cette leçon.

Afin de créer un nouvel élément sur une page Web, l'objet document dispose des méthodes suivantes :

• createElement(elementName) : crée un nouvel élément, toute balise de page HTML doit être passée en paramètre, renvoie un élément HTML
• createTextNode(text) : Crée un nœud de texte et renvoie le même.

Ajouter un élément

Regardons un petit exemple :

Var el = document.createElement("div"); var elText = document.createTextNode("Bonjour tout le monde");

Comme vous pouvez le voir dans l'exemple, la variable elem stockera un lien vers le nouvel élément div. Cependant, comme vous l'avez compris, créer des éléments ne suffit pas, il faut encore les ajouter à la page Web. Après tout, lorsque nous créons des éléments de cette manière, ils semblent se trouver dans une sorte d'espace virtuel ou en mémoire, mais pour les afficher sur une page Web, il existe des méthodes spéciales.

Les méthodes suivantes sont utilisées pour ajouter des éléments à une page Web :

• appendChild(newNode) : ajoute un nouvel élément à la fin de l'élément sur lequel cette méthode a été appelée
• insertBefore(newNode, referenceNode) : ajoute un nouveau nœud avant le nœud spécifié comme deuxième paramètre.

Regardons un exemple d'attachement d'un élément à une page Web à l'aide de la méthode appendChild :

Le titre de l'article

Premier paragraphe

La deuxième paragraphe

var article = document.querySelector("div.article"); // crée un élément var el = document.createElement("h3"); // crée du texte pour cela var elTxt = document.createTextNode("Hello world"); // ajoute du texte à l'élément en tant qu'élément enfant el.appendChild(elTxt); // ajoute un élément au bloc div article.appendChild(el);

L'exemple a créé un élément d'en-tête h3 normal et un nœud de texte. Le nœud de texte est ensuite ajouté à l'élément titre. Le titre est ensuite ajouté à l'un des éléments de la page Web afin qu'il soit visible sur la page.

Mais il n'est pas du tout nécessaire d'avoir un nœud de texte supplémentaire pour créer du texte à l'intérieur d'un élément ; pour cela, il existe la propriété textContent, qui permet d'attribuer directement du texte à un élément.

Var el = document.createElement("h3"); el.textContent = "Bonjour, je suis le titre";

Dans ce cas, le texte sera créé implicitement lors de la définition directe du texte.

Et voyons également comment ajouter cet élément au début d'une collection de nœuds enfants d'un div :

Var artDiv = document.querySelector("div.article"); // crée un élément var el = document.createElement("h2"); // crée du texte pour cela var eltxt = document.createTextNode("Hello world"); // ajoute du texte à l'élément en tant qu'élément enfant el.appendChild(eltxt); // récupère le premier élément qui sera précédé de l'ajout var firstEl = artDiv.firstChild.nextSibling; // ajoute un élément au bloc div avant le premier nœud artDiv.insertBefore(el, firstEl);

Si vous avez soudainement besoin d'ajouter un nouveau nœud au deuxième, au troisième ou à tout autre endroit, vous devez alors trouver le nœud avant lequel vous devez l'insérer en utilisant les propriétés suivantes firstChild/lastChild ou nextSibling/previousSibling.

Copier un élément

Il existe des situations où les éléments sont de composition assez complexe et il est plus facile de les copier. Une méthode cloneNode() distincte est utilisée pour cela.

Var artDiv = document.querySelector("div.article"); // clone l'élément articleDiv var newArtDiv = artDiv.cloneNode(true); // ajoute à la fin de l'élément body document.body.appendChild(newArtDiv);

Vous devez passer une valeur booléenne en paramètre à la méthode cloneNode() : si vous passez true, l'élément sera copié avec tous les nœuds enfants ; si vous passez false, il sera copié sans nœuds enfants. Dans cet exemple, nous copions l'élément avec son contenu et l'ajoutons à la fin de la page Web.

Supprimer un élément

Afin de supprimer un élément, vous devez appeler la méthode RemoveChild(). Cette méthode supprimera l'un des nœuds enfants :

Var artDiv = document.querySelector("div.article"); // trouve le nœud que nous allons supprimer - le premier paragraphe var removNode = document.querySelectorAll("div.article p"); // supprime le nœud artDiv.removeChild(removNode);

Cet exemple supprimera le premier paragraphe du bloc div

Remplacer un élément

Pour remplacer un élément par un autre, utilisez la méthode replaceChild(newNode, oldNode). Cette méthode prend un nouvel élément comme 1er paramètre, qui remplace l'ancien élément passé comme 2ème paramètre.

Var artDiv = document.querySelector("div.article"); // trouve le nœud que nous allons remplacer - le premier paragraphe var old = document.querySelectorAll("div.article p"); // crée un élément var new = document.createElement("h3"); // crée du texte pour cela var elemtxt = document.createTextNode("Hello world"); // ajoute du texte à l'élément en tant qu'élément enfant new.appendChild(elemtxt); // remplace l'ancien nœud par un nouveau artDiv.replaceChild(new, old);

Dans cet exemple, nous remplaçons le premier paragraphe par le titre h2 que nous venons de créer.

RÉSULTATS.

Pour créer un élément, les méthodes suivantes sont utilisées :

document.createElement(tag) - crée un nouvel élément.

document.createTextNode(text) - crée un nœud de texte

Méthodes d'insertion et de suppression de nœuds

• parent.appendChild(el) - ajoute un élément à la fin d'un élément existant
• parent.insertBefore(el, nextSibling) - insère un élément avant un élément existant
• parent.removeChild(el) - supprime un élément
• parent.replaceChild(newElem, el) - remplace un élément par un autre
• parent.cloneNode(bool) - copie un élément, si le paramètre bool=true alors l'élément est copié avec tous les éléments enfants, et si faux alors sans éléments enfants

Tâches Fonction d'insertion d'éléments

Écrivez une fonction insertAfter(newEl,oldEl) qui insère un élément après l'autre dans la fonction elle-même, les éléments eux-mêmes sont passés en paramètres.