0

O que eu estou fazendo de errado no meu exemplo?

var t = document.querySelector("#t");

t.prependChild('<div class="verde"></div>');
#t{
  width: 300px;
  background: red;
 height: 300px; 
}
.verde{
   background: green;
    width: 30px;
    height: 30px;
    display: block; 
}
.roxo{
   background: purple;
    width: 30px;
    height: 30px;
    display: block; 
}
<div id="t">
  <div class="roxo"></div>
</div>

2
  • 1
    O método prependChild não existe, isso é que está errado.
    – bfavaretto
    Commented 2/04/2018 às 19:31
  • Como faço para dar certo?
    – AKU
    Commented 2/04/2018 às 19:32

3 Respostas 3

4

Há algumas formas de adicionar um elemento/código HTML dentro, fora, antes ou depois de um elemento. Uma delas é com o método insertAdjacentHTML. Com ele você pode usar um código HTML, sem necessidade do createElement.

element.insertAdjacentHTML("posição", "código-html");

Para controlar onde você quer o elemento, basta adicionar um dos valores abaixo no lugar de posição

beforebegin: Antes do Elemento

afterbegin: Dentro do elemento e antes do seu primeiro filho

beforeend: Dentro do elemento e depois do seu último filho

afterend: Após o elemento

Exemplo:

var t = document.querySelector("#t");

t.insertAdjacentHTML('beforebegin', '<div class="verde"></div>');
#t{
  width: 300px;
  background: red;
 height: 300px; 
}
.verde{
   background: green;
    width: 30px;
    height: 30px;
    display: block; 
}
.roxo{
   background: purple;
    width: 30px;
    height: 30px;
    display: block; 
}
<div id="t">
  <div class="roxo"></div>
</div>

2
  • 1
    lol, eu não conhecia o insertAdjacentHTML Commented 2/04/2018 às 19:55
  • Tragam um mito para esse Oscar chamado Valdeir. Show de bola esse insertAdjacentHTML. Commented 15/01/2020 às 19:48
1

Duas coisas que você fez errado:

  1. Tentar usar um método prependChild que não existe
  2. Tentar passar uma string para esse método.

Solução mais curta

var t = document.querySelector("#t");
t.innerHTML = '<div class="verde"></div>' + t.innerHTML;

Solução sem innerHTML (costuma ser mais eficiente)

var t = document.querySelector("#t");
var div = document.createElement('div');
div.className = 'verde';
t.insertBefore(div, t.firstChild);
1

O método prependChild não existe, ao menos não nativamente.

Você pode criar o seu próprio método como uma extensão de Element.prototype:

var t = document.querySelector("#t");
var div = document.createElement("div");
div.classList.add("verde");


//Espera receber um nó como parâmetro
Element.prototype.prependChild = function prependChild(element) {
    this.insertBefore(element,this.firstChild); 
};


t.prependChild(div);
#t{
  width: 300px;
  background: red;
 height: 300px; 
}
.verde{
   background: green;
    width: 30px;
    height: 30px;
    display: block; 
}
.roxo{
   background: purple;
    width: 30px;
    height: 30px;
    display: block; 
}
<div id="t">
  <div class="roxo"></div>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .