add element after in JS

Question

How to add element ("br tag in my example") before and after an element in JavaScreipt:

In other words I need the equivalent of the following but in JavaScipt:

$('<br />').insertBefore('#id1');
$('<br />').insertAfter('#id1');

JSfiddle

possible duplicate of [How to do insert After() in JavaScript without using a library?](http://stackoverflow.com/questions/4793604/how-to-do-insert-after-in-javascript-without-using-a-library) — Wesley Murch, Mar 25 '14 at 06:21
Nothing wrong with my JQuery, but I need its equivalent in JavaScript! — , Mar 25 '14 at 06:21
@user3421904 here was my Google query: https://www.google.com/search?q=javascript+add+element+after — Wesley Murch, Mar 25 '14 at 06:21
I actually bet you can solve whatever problem you're having with CSS. — Wesley Murch, Mar 25 '14 at 06:23

score 0 · Accepted Answer · answered Mar 25 '14 at 06:21

Should be straight forward, insertBefore is available in native JS as well, so insert one BR tag before the element, then get the next sibling element and insert a BR before that, which would also be right after the targeted element :

var elem = document.getElementById('id1');
var br   = document.createElement('br');
elem.parentNode.insertBefore(br.cloneNode(false), elem);
elem.parentNode.insertBefore(br.cloneNode(false), elem.nextSibling);

FIDDLE

score 0 · Answer 2 · answered Mar 25 '14 at 06:27

Check this answer

var parentGuest = document.getElementById("one");
var childGuest = document.createElement("br");
parentGuest.parentNode.insertBefore(childGuest,parentGuest);
parentGuest.parentNode.insertBefore(childGuest,parentGuest.nextSibling);

(JSFIDDLE HERE)

score 0 · Answer 3 · answered Mar 25 '14 at 06:35

<html>
<body>

<div id="a"><div id="a1">Coffee</div><div id="a2">Tea</div></div><br/><br/>
<div id="b"><div id="b1">Mother</div><div id="b2">Father</div></div>


<button onclick="myFunction()">Try it</button>

<script>
function myFunction()
{
//insertBefore
var newItem1=document.createElement("hr");
var parent1=document.getElementById("a");
var child1=document.getElementById("a2");

parent1.insertBefore(newItem1,child1);

//insertAfter There is no insert Atfter Method in Java Script




}
</script>

</body>
</html>

add element after in JS

3 Answers3