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.

Maybe you should indent your HTML code so we can read it. :-) — fero
– fero, Commented Jun 5, 2013 at 9:38
@rajansoft1: I m not using jquery, so i want only javascript code — Anjil panchal
– Anjil panchal, Commented Jun 5, 2013 at 9:41
@Anjil panchal: any reason you are not using jquery? just wanted to know why you are not willing to use jquery. — rajansoft1
– rajansoft1, Commented Jun 5, 2013 at 10:11

Syed · Accepted Answer · 2021-06-15 06:38:41Z

7

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

answered Jun 15, 2021 at 6:38

Syed

16.6k15 gold badges128 silver badges159 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

K D · Accepted Answer · 2013-06-05 09:42:28Z

5

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

answered Jun 5, 2013 at 9:42

K D

6,0091 gold badge25 silver badges36 bronze badges

Comments

Givi · Accepted Answer · 2013-06-05 09:53:10Z

5

Try this Demo

var node = document.querySelector(".uploader"),
    ele = document.createElement("div");

ele.className = "remove";
ele.innerHTML = "some text";
node.parentNode.insertBefore(ele, node.nextSibling);

answered Jun 5, 2013 at 9:53

Givi

1,7342 gold badges21 silver badges35 bronze badges

Comments

sjkm · Accepted Answer · 2013-06-05 09:51:19Z

0

function appendAfter(divToAppend, siblingBefore) {
    if(siblingBefore.nextSibling) {
        siblingBefore.parentNode.insertBefore(divToAppend, siblingBefore.nextSibling);
    } else {
        siblingBefore.parentNode.appendChild(divToAppend);
    }
}

edited Jun 5, 2013 at 9:51

answered Jun 5, 2013 at 9:44

sjkm

3,9572 gold badges28 silver badges43 bronze badges

Comments

Software Guy · Accepted Answer · 2013-06-05 09:57:18Z

The following example demonstrates what you are trying to achieve using plain JavaScript:

<html>
<head>

<script>

function addNewDiv() {
    var newDiv = document.createElement('div');
    var label = document.createTextNode(" - new div - ");
    var elements = document.getElementsByClassName('uploader');
    var uploaderDiv = elements[0];

    newDiv.appendChild(label);
    elements[0].insertBefore(newDiv, uploaderDiv.children[0]);
}    

</script>

</head>
<body>

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

<input type="button" onClick="addNewDiv()" value="Add new Div" />

</body>
</html>

Collectives™ on Stack Overflow

Append a div after another div with javascript

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related