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.

Answer 1

There are (at least) two ways, 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>');

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

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

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

References:

• document.createElement().
• document.querySelector().
• Element.insertAdjacentHTML().
• Node.firstChild.
• Node.insertBefore().
• Node.nextSibling.
• Node.parentNode.