How to add div before another div with Javascript

Asked

Viewed 1,032 times

3

I’m having trouble getting a new div before another or just add a div, but with Javascript.

Example:

I already have a DIV

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

I want to add one above it with Javascript, getting like this:

<div class="div-adicionada"></div>
<div class="primeira"></div>
javascript

  • Lucas, I ask you to read this topic that teaches how to create a question, helps increase the chances of getting useful answers, alias Welcome to Stackoverflow BR! http://answall.com/help/how-to-ask

  • If you’re using jQuery, see if that help you.

  • You can understand very well what he wants...

  • @Andersoncarloswoss 'put a new DIV before another', obviously it is an 'insertBefore', I see no reason to close just ask for more information until it is his first question.

  • I would like a script that creates a new DIV above another

  • @Andersoncarloswoss, this is very correct, I believe it has already been discussed, between closing and improving the question (even though my opinion is to comment). But in this particular one, what does it have to improve? It’s more than clear.

  • I think I can understand now

  • The easiest way to achieve this is by using the insertAdjacentHTML method, thus: Document.getElementsByClassName("first")[0]. insertAdjacentHTML("beforebegin", "<div class='div-added'></div>"); The support is very good. I posted here until the topic is open to answers. Then I reset.

Show 3 more comments

2 answers

2


It is possible to use the function insertAdjacentHTML.

The first parameter is the position you want to insert, use beforebegin to add before. You can see all possible values in the documentation.

The second parameter is string HTML to be inserted.

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

  • This clikar script on the button and add I already found

  • @Lucasgiovanni Just put this on the page startup.

  • @Lucasgiovanni See my edition

  • @Why did Lucasgiovanni remove the acceptance? There is something wrong in the answer?

  • I ended up having a problem here now and I was already thinking how I’m going to explain to you

  • @Lucasgiovanni Great, we’re here to help ourselves. But keep different problems on different questions, okay? This keeps the site organized and makes it much easier to help other people and help you.

  • I got a partner here, thank you very much!!!

Show 2 more comments

0

use the method 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>

  • This clikar script on the button and add I already found .

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.