Como posso implementar o prepend e append com JavaScript regular?

Como posso implementar antes e acrescentar com JavaScript regular sem usar jQuery?

Talvez você esteja perguntando sobre os methods DOM appendChild e insertBefore .

 parentNode.insertBefore(newChild, refChild) 

Insere o nó newChild como um filho de parentNode antes do refChild nó filho existente. (Retorna newChild .)

Se refChild for null, newChild será adicionado ao final da lista de filhos. Equivalente e mais legível, use parentNode.appendChild(newChild) .

Aqui está um trecho para você ir:

 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 nos dará uma referência ao primeiro elemento dentro do theParent e colocará o theKid antes dele.

Você não nos deu muito para continuar aqui, mas eu acho que você está apenas perguntando como adicionar conteúdo ao começo ou ao fim de um elemento? Se sim, aqui está como você pode fazer isso 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; 

Bem fácil.

Se você deseja inserir uma string HTML bruta, não importa o quão complexo seja, você pode usar: insertAdjacentHTML , com o primeiro argumento apropriado:

‘beforebegin’ Antes do próprio elemento. ‘afterbegin’ Apenas dentro do elemento, antes de seu primeiro filho. ‘beforeend’ Apenas dentro do elemento, depois do seu último filho. ‘afterend’ Depois do elemento em si.

Dica: você sempre pode chamar Element.outerHTML para obter a string HTML que representa o elemento a ser inserido.

Um exemplo de uso:

 document.getElementById("foo").insertAdjacentHTML("beforeBegin", "

I

was

inserted

");

DEMO

Cuidado: insertAdjacentHTML não preserva os listeners que estão conectados com .addEventLisntener .

Para simplificar sua vida, você pode estender o HTMLElement . Pode não funcionar para navegadores mais antigos, mas definitivamente facilita a sua vida:

 HTMLElement = typeof(HTMLElement) != 'undefiend' ? HTMLElement : Element; HTMLElement.prototype.prepend = function(element) { if (this.firstChild) { return this.insertBefore(element, this.firstChild); } else { return this.appendChild(element); } }; 

Então da próxima vez você pode fazer isso:

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

Aqui está um exemplo do uso do prepend para adicionar um parágrafo ao documento.

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

resultado:

 

Example text

Eu adicionei isso no meu projeto e parece funcionar:

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

Exemplo:

 document.body.prependHtml(`Hello World`); document.body.appendHtml(`Hello World`); 

Em 2017 eu sei para Edge 15 e IE 12, o método prepend não é incluído como uma propriedade para elementos Div, mas se alguém precisar de uma referência rápida para polyfill uma function eu fiz isso:

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

Função de seta simples que é compatível com a maioria dos navegadores modernos.

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

Se referenceElement for nulo ou indefinido, newElement será inserido no final da lista de nós filhos.

 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. 

Exemplos podem ser encontrados aqui: Node.insertBefore

Esta não é a melhor maneira de fazer isso, mas se alguém quiser inserir um elemento antes de tudo, aqui está uma maneira.

 var newElement = document.createElement("div"); var element = document.getElementById("targetelement"); element.innerHTML = '
' + element.innerHTML; var referanceElement = element.children[0]; element.insertBefore(newElement,referanceElement); element.removeChild(referanceElement);