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

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

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).

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.

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.

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.

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>`);

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);

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>

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.

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

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

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);