1//insert new Element after some reference Element
2function insertAfter(newElement, referenceElement) {
3 referenceElement.parentNode.insertBefore(newElement, referenceElement.nextSibling);
4}
5
6//example usage
7var newElement = document.createElement("div");
8 newElement.innerHTML = "my New Div Text";
9var myCurrentElement= document.getElementById("myElementID");
10 insertAfter(newElement, myCurrentElement);
1var d1 = document.getElementById('one');
2d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
3
1
2
3
4
5 function insertAfter(newNode, existingNode) {
6 existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
7}
1<!DOCTYPE html>
2<html>
3<body>
4 <p id='up'>Up</p>
5 <p id="down">Down</p>
6 <button id="switchBtn" onclick="switch_place()">Switch place</button>
7 <script>
8 function switch_place(){
9 var downElement = document.getElementById("down")
10 var upElement = document.getElementById("up")
11 downElement.after(upElement);
12 document.getElementById('switchBtn').innerHTML = "Switched!"
13 }
14 </script>
15</body>
16</html>
1//Use Jquery
2//Include this in your <head>
3<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
4
5// This over writes any existing data in the element
6// To prevent you can just create a new div under your element
7
8<yourElement>
9 <div id='<your element id here>'>
10 <!--Your Jquery will be rendered here-->
11 </div>
12</yourElement>
13
14$('#<your element id here>').html(data);