Come posso implementare anteporre e aggiungere con JavaScript regolare?

Come posso implementare anteporre e aggiungere con JavaScript regolare senza usare jQuery?

Forse stai chiedendo dei metodi DOM appendChild e insertBefore.

parentNode.insertBefore(newChild, refChild)

Inserisce il nodo newChildcome figlio di parentNodeprima del nodo figlio esistente refChild. (Restituisce newChild.)

Se refChildè null, newChildviene aggiunto alla fine dell'elenco di elementi secondari. Uso equivalente e più leggibile parentNode.appendChild(newChild).

Ecco uno snippet per iniziare:

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.firstChildci darà un riferimento al primo elemento all'interno theParente lo metterà theKiddavanti.

Non ci hai dato molto da fare qui, ma penso che stai solo chiedendo come aggiungere contenuti all'inizio o alla fine di un elemento? Se è così, ecco come puoi farlo abbastanza facilmente:

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

Molto facile.

Se si desidera inserire una stringa HTML non elaborata, indipendentemente dalla complessità, è possibile utilizzare insertAdjacentHTML:, con il primo argomento appropriato:

'beforebegin' Prima dell'elemento stesso. 'afterbegin' Appena dentro l'elemento, prima del suo primo figlio. 'beforeend' Appena dentro l'elemento, dopo il suo ultimo figlio. 'afterend' Dopo l'elemento stesso.

Suggerimento: è sempre possibile chiamare Element.outerHTMLper ottenere la stringa HTML che rappresenta l'elemento da inserire.

Un esempio di utilizzo:

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

DEMO

Attenzione: insertAdjacentHTML non preserva gli ascoltatori a cui erano collegati .addEventLisntener.

Ho aggiunto questo al mio progetto e sembra funzionare:

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

Esempio:

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

Per semplificare la tua vita puoi estendere l' HTMLElementoggetto. Potrebbe non funzionare con i browser più vecchi, ma sicuramente ti semplifica la vita:

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

Quindi la prossima volta puoi farlo:

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

Ecco un esempio dell'utilizzo di anteponi per aggiungere un paragrafo al documento.

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

risultato:

<p>Example text</p>

Nel 2017 conosco Edge 15 e IE 12, il metodo di prepend non è incluso come proprietà per gli elementi Div, ma se qualcuno ha bisogno di un rapido riferimento al polifill una funzione che ho fatto:

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

Semplice funzione freccia compatibile con la maggior parte dei browser moderni.

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

Se referenceElement è null o non definito, newElement viene inserito alla fine dell'elenco di nodi figlio.

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.

Esempi sono disponibili qui: Node.insertBefore

Puoi anche usare unshift () per anteporre a un elenco

Questo non è il modo migliore per farlo, ma se qualcuno vuole inserire un elemento prima di tutto, ecco un modo.

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