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

Question

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

Answer 1

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 à l'intérieur de theParent et metons theKid avant cela.

Answer 2

Vous êtes peut-être s'interroger sur les méthodes du DOM appendChild et insertBefore.

parentNode.insertBefore(newChild, refChild)

Insère le nœud newChild comme un enfant de parentNode avant la enfant nœud refChild. (Les retours newChild.)

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

Answer 3

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.

Answer 4

Si vous souhaitez insérer un code HTML brut chaîne complexes, vous pouvez utiliser: insertAdjacentHTML, avec le premier argument:

'beforebegin' Avant de 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 faire appel à Element.outerHTML pour obtenir le code HTML chaîne de caractères 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 permet pas de conserver les auditeurs que, lorsque joint avec .addEventLisntener.

Answer 5

ajouter sans JQuery:

 parent.insertBefore(child, parent.firstChild);