How To Add A Div Between Two Divs By Javascript

July 28, 2023 Post a Comment

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

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

<divclass="div1"><divclass="div1inside">
    Text
  </div></div><divclass="div2"><divclass="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);

<divclass="div1"><divclass="div1inside">
    Text
  </div></div><divclass="div2"><divclass="div2inside">
    Text
  </div></div>

References:

Solution 2:

Use Node#insertBefore method.

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

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

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

<divclass="div1"><divclass="div1inside">
    Text
  </div></div><divclass="div2"><divclass="div2inside">
    Text
  </div></div>

Solution 3:

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

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

Solution 4:

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

Solution 5:

This link will be helpfull to get the above result.

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

Html5 Tips