Comment puis-je implémenter le préfixe et l'ajout avec JavaScript standard?

150

Comment puis-je implémenter le préfixe et l' ajout avec JavaScript standard sans utiliser jQuery?

Yosef
la source
1
Je ne comprends pas ce que tu veux dire.
Pekka
@GenericTypeTea: Moi aussi, à peu près au même moment ... Je vais laisser ça tranquille maintenant!
Mark Byers
@Mark - Votre montage était meilleur :).
djdd87

Réponses:

147

Vous posez peut-être des questions sur les méthodes DOM appendChild et insertBefore.

parentNode.insertBefore(newChild, refChild)

Insère le nœud en newChildtant qu'enfant parentNodeavant le nœud enfant existant refChild. (Retourne newChild.)

Si refChildest nul, newChildest ajouté à la fin de la liste des enfants. Utilisez de manière équivalente et plus lisible parentNode.appendChild(newChild).

Grumdrig
la source
7
donc préfixer est essentiellement ceci alorsfunction prepend(tag, ele) { var x =document.getElementsByTagName(tag)[0]; x.insertBefore(ele ,x.children[0]); }
Muhammad Umer
166

Voici un extrait de code pour vous aider:

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.firstChildnous donnera une référence au premier élément à l'intérieur theParentet mis theKiddevant lui.

Tapoter
la source
Merci, pourquoi pour préfixer simplement utiliser insertBefore sans créer de div supplémentaire? comme la réponse de Grumdrig?
Yosef
cela crée un élément et l'ajoute au dom, ajoute et ajoute le travail différemment
Andrei Cristian Prodan
Je comprends celui-ci comparé à la réponse de Grumdig
andrew
10
Nous sommes en 2015. Pouvons-nous encore avoir une prepend()méthode intégrée ?
1,21 gigawatts
Node.append ou node.appendChild sont des méthodes void, utilisez plutôt insertBefore (node, null)
Suhayb
28

Vous ne nous avez pas donné grand-chose à faire ici, mais je pense que vous demandez simplement comment ajouter du contenu au début ou à la fin d'un élément? Si tel est le cas, 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.

Munzilla
la source
Sympa, exactement ce que je cherchais.
Andrei Cristian Prodan
2
@Munzilla Cette méthode forcera le navigateur à analyser à nouveau tous les enfants existants. Dans les solutions ci-dessus, le navigateur doit simplement attacher l'enfant donné au document.
Sayam Qazi
12

Si vous souhaitez insérer une chaîne HTML brute quelle que soit sa complexité, vous pouvez utiliser:, insertAdjacentHTMLavec 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.

Astuce: vous pouvez toujours appeler Element.outerHTMLpour 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>");

DEMO

Attention: insertAdjacentHTML ne préserve pas les écouteurs qui étaient attachés avec .addEventLisntener.

artur grzesiak
la source
" insertAdjacentHTMLne préserve pas les auditeurs ..." Quels auditeurs? C'est du HTML, donc il n'y a pas encore d'éléments à lier. Si vous faisiez référence à des éléments existants à l'intérieur foo, ce n'est pas une vraie déclaration. Le but .insertAdjacentHTMLest de préserver les auditeurs. Vous pensez peut-être à .innerHTML += "..."ce qui détruit les anciens nœuds DOM.
spanky
@spanky Vous avez raison, cette déclaration peut être interprétée de plusieurs façons, ce que je voulais dire, c'était les nœuds DOM fraîchement créés avec insertAdjacentHTML(pas la racine ni les descendants existants de la racine)
artur grzesiak
6

J'ai ajouté ceci sur 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>`);
Raza
la source
5

Afin de vous simplifier la vie, vous pouvez prolonger l' HTMLElementobjet. Cela peut ne pas fonctionner pour les navigateurs plus anciens, mais vous facilite définitivement 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 ceci:

document.getElementById('container').prepend(document.getElementById('block'));
// or
var element = document.getElementById('anotherElement');
document.body.prepend(div);
moka
la source
1
et si le nœud n'a pas de nœuds enfants? Dans ce cas, firstChild sera nul
felixfbecker
prepend existe déjà, voir ParentNode.prepend (), donc pour faire prependChild il suffit d'appeler prnt.prepend (chld)
Igor Fomenko le
2

Voici un exemple d'utilisation du préfixe 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>
JamesH
la source
1

En 2017, je sais que pour 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 pour polyfill une fonction, j'ai fait 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.

akiespenc
la source
0
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

b3wii
la source
0

Vous pouvez également utiliser unshift () pour ajouter à une liste

Steve libéré
la source
-1

Ce n'est pas la meilleure façon de le faire, mais si quelqu'un veut insérer un élément avant tout, voici un moyen.

var newElement = document.createElement("div");
var element = document.getElementById("targetelement");
element.innerHTML = '<div style="display:none !important;"></div>' + element.innerHTML;
var referanceElement = element.children[0];
element.insertBefore(newElement,referanceElement);
element.removeChild(referanceElement);
Güven Altuntaş
la source