web-dev-qa-db-fra.com

Comment puis-je implémenter prepend et append avec JavaScript?

Comment puis-je implémenter prepend et append avec du JavaScript normal sans utiliser jQuery?

javascriptappendprepend
142
Yosef

Vous posez peut-être des questions sur méthodes DOMappendChild et insertBefore.

parentNode.insertBefore(newChild, refChild)

Insère le noeud newChild en tant qu'enfant de parentNode avant le noeud enfant existant refChild. (Retourne newChild.)

Si refChild est nul, newChild est ajouté à la fin de la liste des enfants. De manière équivalente et plus lisible, utilisez parentNode.appendChild(newChild).

139
Grumdrig

Voici un extrait pour vous aider à démarrer:

theParent = document.getElementById("theParent");
theKid = document.createElement("div");
theKid.innerHTML = 'Are we there yet?';

// append theKid to the end of theParent
theParent.appendChild(theKid);

// prepend theKid to the beginning of theParent
theParent.insertBefore(theKid, theParent.firstChild);

theParent.firstChild nous donnera une référence au premier élément dans theParent et mettra theKid devant lui.

157
Pat

Vous ne nous avez pas donné beaucoup pour continuer ici, mais je pense que vous demandez simplement comment ajouter du contenu au début ou à la fin d'un élément? Si oui, voici comment vous pouvez le faire assez facilement:

//get the target div you want to append/prepend to
var someDiv = document.getElementById("targetDiv");

//append text
someDiv.innerHTML += "Add this text to the end";

//prepend text
someDiv.innerHTML = "Add this text to the beginning" + someDiv.innerHTML;

Plutôt facile.

26
Munzilla

Si vous souhaitez insérer une chaîne HTML brute, quelle que soit sa complexité, vous pouvez utiliser: insertAdjacentHTML , avec le premier argument approprié:

'beforebegin' Avant l'élément lui-même. 'afterbegin' Juste à l'intérieur de l'élément, avant son premier enfant. 'beforeend' Juste à l'intérieur de l'élément, après son dernier enfant. 'afterend' Après l'élément lui-même.

Indice: vous pouvez toujours appeler Element.outerHTML pour obtenir la chaîne HTML représentant l'élément à insérer.

Un exemple d'utilisation:

document.getElementById("foo").insertAdjacentHTML("beforeBegin",
          "<div><h1>I</h1><h2>was</h2><h3>inserted</h3></div>");

DÉMO

Attention: insertAdjacentHTML ne conserve pas les écouteurs liés à .addEventLisntener.

8
artur grzesiak

Pour vous simplifier la vie, vous pouvez étendre l’objet HTMLElement. Cela ne fonctionnera peut-être pas pour les anciens navigateurs, mais vous facilitera certainement la vie:

HTMLElement = typeof(HTMLElement) != 'undefined' ? HTMLElement : Element;

HTMLElement.prototype.prepend = function(element) {
    if (this.firstChild) {
        return this.insertBefore(element, this.firstChild);
    } else {
        return this.appendChild(element);
    }
};

Alors la prochaine fois que vous pourrez faire ça:

document.getElementById('container').prepend(document.getElementById('block'));
// or
var element = document.getElementById('anotherElement');
document.body.prepend(div);
4
moka

Je l'ai ajouté à mon projet et cela semble fonctionner:

HTMLElement.prototype.prependHtml = function (element) {
    const div = document.createElement('div');
    div.innerHTML = element;
    this.insertBefore(div, this.firstChild);
};

HTMLElement.prototype.appendHtml = function (element) {
    const div = document.createElement('div');
    div.innerHTML = element;
    while (div.children.length > 0) {
        this.appendChild(div.children[0]);
    }
};

Exemple:

document.body.prependHtml(`<a href="#">Hello World</a>`);
document.body.appendHtml(`<a href="#">Hello World</a>`);
3
Raza

Voici un exemple d'utilisation de prepend pour ajouter un paragraphe au document.

var element = document.createElement("p");
var text = document.createTextNode("Example text");
element.appendChild(text);
document.body.prepend(element);

résultat:

<p>Example text</p>
2
JamesH

En 2017 Je connais Edge 15 et IE 12, la méthode prepend n'est pas incluse en tant que propriété pour les éléments Div, mais si quelqu'un a besoin d'une référence rapide à polyfill une fonction que j'ai faite ceci:

 HTMLDivElement.prototype.prepend = (node, ele)=>{ 
               try { node.insertBefore(ele ,node.children[0]);} 
                     catch (e){ throw new Error(e.toString()) } }

Fonction de flèche simple compatible avec la plupart des navigateurs modernes.

1
akiespenc
var insertedElement = parentElement.insertBefore(newElement, referenceElement);

Si referenceElement est null ou non défini, newElement est inséré à la fin de la liste des nœuds enfants.

insertedElement The node being inserted, that is newElement
parentElement The parent of the newly inserted node.
newElement The node to insert.
referenceElement The node before which newElement is inserted.

Des exemples peuvent être trouvés ici: Node.insertBefore

0
b3wii

Vous pouvez également utiliser unshift () pour ajouter une liste si vous utilisez Node.js

0
Steve Freed