Append a div after another div with javascript

Question

Is there any predefined method in javascript that can append div after a div? For example:

<div class="uploader">
    <div class="file-metas">
        <div class="file-name">status<span class="file-size">1kb</span></div>
        <p class="state state-success">Success</p>
    </div>
</div>

Now I want to insert another div with class name 'remove' after 'uploader' div.

Answer 1

Vanilla JS: Supported with all the browsers:

Visualization of position names

<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->

code

// <div id="one">one</div>
var d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');

// At this point, the new structure is:
// <div id="one">one</div><div id="two">two</div>

More info here

Answer 2

Yeah it is possible using pure javascript

You can use insertBefore method to do so by accessing parent node of target element.

document.getElementsByClassName("uploader").parentNode

Take a look