How to add a div between two divs by Javascript

Question

I am using wordpress and I want to add some html code on page using Javascript. I don't want to make child theme then edit php files. It is risky and I don't know about php.

I want to add a sibling div. This is an example code as default.

<div class="div1">
  <div class="div1inside">
  Text
  </div>
</div>

<div class="div2">
  <div class="div2inside">
  Text
  </div>
</div>

Now I want to add my custom div and its inside html between both div1 and div2.

<div class="mydiv">
  <div class="mydivinside">
  Text
  </div>
</div>

Please let me know how is it possible using Javascript.

[insertBefore](https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore)? `document.insertBefore(mydiv, div2);`? — putvande, Jan 02 '17 at 10:28
Possible duplicate: [How to append a childnode to a specific position](http://stackoverflow.com/questions/5882768/how-to-append-a-childnode-to-a-specific-position) — Tân, Jan 02 '17 at 10:29
I tried it but failed. var test = document.getElementsByClassName('div2') new Element('div', { "class": 'topheader', "id": 'topheader', html: '

Text

' }).inject(test, 'before'); — Iftek Har, Jan 02 '17 at 10:42

David Thomas · Accepted Answer · 2023-04-10T08:21:35.107

There are (at least) ~~two~~ four ways (having edited the answer in 04/2023), the first:

// document.querySelector() finds, and returns, the first element
// matching the supplied selector (or null, if no element is found):
var el1 = document.querySelector('.div1');

// here we create an adjacent element from the string of HTML,
// the 'afterend' argument states that this adjacent element
// follows the el1 node, rather than preceding it or appearing
// within:
el1.insertAdjacentHTML('afterend', '<div class="mydiv"><div class="mydivinside">Text</div></div>');

var div1 = document.querySelector('.div1');

div1.insertAdjacentHTML('afterend', '<div class="mydiv"><div class="mydivinside">Text</div></div>');

.mydivinside {
  background-color: hsl(90deg 80% 90% / 1);
}

<div class="div1">
  <div class="div1inside">
    Text
  </div>
</div>

<div class="div2">
  <div class="div2inside">
    Text
  </div>
</div>

And the second where you first create that <div> to be inserted, and then use parentNode.insertBefore():

var htmlString = '<div class="mydiv "><div class="mydivinside">Text</div></div>',

  // here we create a <div> element:
  div = document.createElement('div'),

  // we retrieve the element after which the new
  // element should be inserted:
  div1 = document.querySelector('.div1');

// assign the supplied HTML string to the innerHTML of the
// created element:
div.innerHTML = htmlString;

// and use parentNode.insertBefore to insert the desired element
// (the first argument) before the element identified in the
// second argument, which is the nextSibling of the found
// 'div1' element:
div1.parentNode.insertBefore(div.firstChild, div1.nextSibling);

var htmlString = '<div class="mydiv "><div class="mydivinside">Text</div></div>',
  div = document.createElement('div'),
  div1 = document.querySelector('.div1');

div.innerHTML = htmlString;

div1.parentNode.insertBefore(div.firstChild, div1.nextSibling);

.mydivinside {
  background-color: hsl(90deg 80% 90% / 1);
}

<div class="div1">
  <div class="div1inside">
    Text
  </div>
</div>

<div class="div2">
  <div class="div2inside">
    Text
  </div>
</div>

Coming back to this answer, in April 2023, it's worth adding that there are also, now, the Element.after() and Element.before() methods in JavaScript:

var htmlString = '<div class="mydiv "><div class="mydivinside">Text</div></div>',
  div = document.createElement('div'),
  div1 = document.querySelector('.div1');

div.innerHTML = htmlString;

// this - as the name suggests - takes the created
// element, and inserts it after the div1 element:
div1.after(div);

var htmlString = '<div class="mydiv "><div class="mydivinside">Text</div></div>',
  div = document.createElement('div'),
  div1 = document.querySelector('.div1');

div.innerHTML = htmlString;

div1.after(div);

.mydivinside {
  background-color: hsl(90deg 80% 90% / 1);
}

<div class="div1">
  <div class="div1inside">
    Text
  </div>
</div>

<div class="div2">
  <div class="div2inside">
    Text
  </div>
</div>

var htmlString = '<div class="mydiv "><div class="mydivinside">Text</div></div>',
  div = document.createElement('div'),
  div2 = document.querySelector('.div2');

div.innerHTML = htmlString;

// this - as the name suggests - takes the created
// element, and inserts it before the div2 element:
div2.before(div);

var htmlString = '<div class="mydiv "><div class="mydivinside">Text</div></div>',
  div = document.createElement('div'),
  div2 = document.querySelector('.div2');

div.innerHTML = htmlString;

div2.before(div);

.mydivinside {
  background-color: hsl(90deg 80% 90% / 1);
}

<div class="div1">
  <div class="div1inside">
    Text
  </div>
</div>

<div class="div2">
  <div class="div2inside">
    Text
  </div>
</div>

References:

score 1 · Answer 2 · answered Jan 02 '17 at 10:35

Use Node#insertBefore method.

// create a div element
var div = document.createElement('div');
// set class name
div.className = 'mydiv';
// set html contents
div.innerHTML = ' <div class="mydivinside">  Text  </div>';

// get .div2 element
var ele = document.querySelector('.div2');

// insert before the .div2 element by getting
// its parent node
ele.parentNode.insertBefore(div, ele);

<div class="div1">
  <div class="div1inside">
    Text
  </div>
</div>

<div class="div2">
  <div class="div2inside">
    Text
  </div>
</div>

score 1 · Answer 3 · answered Jan 02 '17 at 10:38

1

You can just use the before method to append a div between both div1 and div2. Here is the example:

$('.div2inside').before("<div class='mydiv'><div class='mydivinside'>Text</div></div>");

answered Jan 02 '17 at 10:38

Safal Mahat

90
1

score 0 · Answer 4 · edited May 23 '17 at 12:24

0

You could do something like this?

var firstDiv = document.getElementById('div1');
firstDiv.parentNode.insertBefore(document.getElementById('new-div'), firstDiv.nextSibling);

This however assumes that your new-div is already in the dom.

EDIT: to create a the new-div on the fly you can use @david-thomas's solution https://stackoverflow.com/a/41425079/1768337

edited May 23 '17 at 12:24

Community

1
1

answered Jan 02 '17 at 10:38

pewpewlasers

3,025
4
31
58

score 0 · Answer 5 · answered Dec 04 '17 at 12:05

0

This link will be helpfull to get the above result.

https://plainjs.com/javascript/manipulation/insert-an-element-after-or-before-another-32/

answered Dec 04 '17 at 12:05

Prashantkumar K B

141
1
13

please add more description to your question – Alex Filatov Dec 04 '17 at 12:30

How to add a div between two divs by Javascript

5 Answers5

Linked