Como posso implementar o prefixo e o anexo com JavaScript regular?


Respostas:


147

Talvez você esteja perguntando sobre os métodos DOM appendChild e insertBefore.

parentNode.insertBefore(newChild, refChild)

Insere o nó newChildcomo um filho parentNodeanterior ao nó filho existente refChild. (Retorna newChild.)

Se refChildfor nulo, newChildé adicionado no final da lista de filhos. Equivalentemente, e mais facilmente, use parentNode.appendChild(newChild).


7
assim preceder é basicamente isso, entãofunction prepend(tag, ele) { var x =document.getElementsByTagName(tag)[0]; x.insertBefore(ele ,x.children[0]); }
Muhammad Umer

166

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.firstChildnos dará uma referência ao primeiro elemento interno theParente será colocado theKiddiante dele.


Obrigado, por que, para pré-anexar, use insertBefore sem criar div adicional? como resposta Grumdrig?
Yosef

isso cria um elemento e adiciona-lo para o dom, acrescentar e trabalho preceder diferente
Andrei Cristian Prodan

Eu recebo este em comparação com a resposta de Grumdig
andrew

10
É 2015. Já podemos ter um prepend()método incorporado ?
1,21 gigawatts

Node.append ou node.appendChild são métodos nulos, use insertBefore (node, null) em vez disso
Suhayb

28

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.


Bom, exatamente o que eu estava procurando.
Andrei Cristian Prodan

2
@Munzilla Este método forçará o navegador a analisar todos os filhos existentes novamente. Nas soluções acima, o Navegador apenas precisa anexar o filho especificado ao documento.
Sayam Qazi 26/07/19

12

Se você deseja inserir uma string HTML não processada, por mais complexa que seja, pode usar:, insertAdjacentHTMLcom 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.outerHTMLpara 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>");

DEMO

Cuidado: insertAdjacentHTML não preserva os ouvintes que foram anexados .addEventLisntener.


" insertAdjacentHTMLnã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.
Spanky

@spanky Você está certo que a declaração pode ser interpretada de várias maneiras, o que eu realmente queria dizer eram os nós DOM recém-criados com insertAdjacentHTML(não a raiz nem os descendentes existentes do root)
artur Grzesiak

6

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

5

Para simplificar sua vida, você pode estender o HTMLElementobjeto. 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);

1
e se o nó não tiver nós filhos? Nesse caso, firstChild será nulo #
felixfbecker 12/11/2015

o prefpend já existe, consulte ParentNode.prepend (), portanto, para tornar o prependChild basta chamar prnt.prepend (chld)
Igor Fomenko

2

Aqui está um exemplo do uso de prefpend 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:

<p>Example text</p>

1

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.


0
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


0

Você também pode usar unshift () para adicionar uma lista antes


-1

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);
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.