Respostas:
Talvez você esteja perguntando sobre os métodos DOM appendChild
e insertBefore
.
parentNode.insertBefore(newChild, refChild)
Insere o nó
newChild
como um filhoparentNode
anterior ao nó filho existenterefChild
. (RetornanewChild
.)Se
refChild
for nulo,newChild
é adicionado no final da lista de filhos. Equivalentemente, e mais facilmente, useparentNode.appendChild(newChild)
.
function prepend(tag, ele) { var x =document.getElementsByTagName(tag)[0]; x.insertBefore(ele ,x.children[0]); }
Aqui está um trecho para você começar:
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 interno theParent
e será colocado theKid
diante dele.
prepend()
método incorporado ?
Você não nos deu muito o que falar aqui, mas acho que você está apenas perguntando como adicionar conteúdo ao início ou ao final de um elemento? Nesse caso, veja 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 não processada, por mais complexa que seja, pode usar:,
insertAdjacentHTML
com o primeiro argumento apropriado:
'beforebegin' Antes do próprio elemento. 'afterbegin' Logo dentro do elemento, antes de seu primeiro filho. 'beforeend' Apenas dentro do elemento, após seu último filho. 'afterend' Após o próprio elemento.
Dica: você sempre pode ligar Element.outerHTML
para obter a string HTML que representa o elemento a ser inserido.
Um exemplo de uso:
document.getElementById("foo").insertAdjacentHTML("beforeBegin",
"<div><h1>I</h1><h2>was</h2><h3>inserted</h3></div>");
Cuidado: insertAdjacentHTML
não preserva os ouvintes que foram anexados .addEventLisntener
.
insertAdjacentHTML
não preserva ouvintes ..." O que ouvintes? Como HTML, ainda não há elementos a serem vinculados. Se você estava se referindo a elementos existentes foo
, não é uma afirmação verdadeira. O ponto principal .insertAdjacentHTML
é que preserva os ouvintes. Talvez você esteja pensando .innerHTML += "..."
, o que destrói os antigos nós do DOM.
insertAdjacentHTML
(não a raiz nem os descendentes existentes do root)
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(`<a href="#">Hello World</a>`);
document.body.appendHtml(`<a href="#">Hello World</a>`);
Para simplificar sua vida, você pode estender o HTMLElement
objeto. Pode não funcionar para navegadores mais antigos, mas definitivamente facilita sua vida:
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);
}
};
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);
Em 2017, eu sei que para o Edge 15 e o IE 12, o método prepend não está incluído como uma propriedade dos elementos Div, mas se alguém precisar de uma referência rápida para polifill uma função, eu fiz isso:
HTMLDivElement.prototype.prepend = (node, ele)=>{
try { node.insertBefore(ele ,node.children[0]);}
catch (e){ throw new Error(e.toString()) } }
Função simples de seta compatível com os navegadores mais 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
Você também pode usar unshift () para adicionar uma lista antes
Essa 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 = '<div style="display:none !important;"></div>' + element.innerHTML;
var referanceElement = element.children[0];
element.insertBefore(newElement,referanceElement);
element.removeChild(referanceElement);