3

Estou com dificuldades de conseguir colocar uma nova div antes de outra ou só adicionar uma div, mas com JavaScript.

Exemplo:

Já tenho uma DIV

<div class="primeira"></div>

Quero adicionar uma acima dela com Javascript, ficando assim:

<div class="div-adicionada"></div>
<div class="primeira"></div>
8
  • Lucas, peço que leia este tópico que ensina como criar uma pergunta, ajuda a aumentar as chances de obter respostas úteis, alias Bem vindo ao Stackoverflow BR! pt.stackoverflow.com/help/how-to-ask Commented 28/09/2017 às 14:39
  • Se estiver utilizando o jQuery, veja se isso lhe ajuda.
    – Francisco
    Commented 28/09/2017 às 14:42
  • Da para entender muito bem o que ele quer... Commented 28/09/2017 às 14:48
  • @AndersonCarlosWoss 'colocar uma nova DIV antes de outra', obviamente se trata de um 'insertBefore', não vejo motivos em fechar basta pedir mais informações até por que é a primeira pergunta dele. Commented 28/09/2017 às 14:54
  • Gostaria de um script que crie uma nova DIV acima de outra Commented 28/09/2017 às 14:58

2 Respostas 2

2

É possível usar a função insertAdjacentHTML.

O primeiro parâmetro é a posição que você quer inserir, use beforebegin para adicionar antes. É possível ver todos os valores possíveis na documentação.

O segundo parâmetro é a string HTML que deve ser inserida.

const div = document.getElementsByClassName('primeira')[0];  
div.insertAdjacentHTML('beforebegin', '<div class="segunda">Segunda div</div>');
<div class="primeira">Primeira div</div>

7
  • Esse script de clikar no botão e adicionar eu já achei Estou precisando de um que simplesmente já fique adicionado e uma só vez Commented 28/09/2017 às 18:27
  • @LucasGiovanni É só colocar isso na inicialização da página.
    – Jéf Bueno
    Commented 28/09/2017 às 18:29
  • @LucasGiovanni Veja minha edição
    – Jéf Bueno
    Commented 28/09/2017 às 18:30
  • @LucasGiovanni Por que removeu a aceitação? Tem algo errado na resposta?
    – Jéf Bueno
    Commented 28/09/2017 às 20:00
  • Acabei tendo um problema aqui agora e já estava pensando como irei lhe explicar Commented 28/09/2017 às 20:01
1

utilize o método Node.insertBefore(newNode, referenceNode).

var primeira = document.querySelector(".primeira");
var divAdicionada = document.createElement("div");

divAdicionada.classList.add("div_adicionada");
divAdicionada.textContent = "Div Adicionada";

primeira.parentElement.insertBefore(divAdicionada, primeira);
<div class="div_qualquer">Div qualquer</div>
<div class="primeira">Primeira</div>

1
  • Esse script de clikar no botão e adicionar eu já achei Estou precisando de um que simplesmente já fique adicionado e uma só vez. Commented 28/09/2017 às 18:04

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 .