js add after element code example

Example 1: javscript insert element after another

//insert new Element after some reference Element
function insertAfter(newElement, referenceElement) {
    referenceElement.parentNode.insertBefore(newElement, referenceElement.nextSibling);
}

//example usage
var newElement = document.createElement("div");
    newElement.innerHTML = "my New Div Text";
var myCurrentElement= document.getElementById("myElementID");
    insertAfter(newElement, myCurrentElement);

Example 2: append after javascript

//insert new Element after some reference Element
function insertAfter(newElement, referenceElement) {
    referenceElement.parentNode.insertBefore(newElement, referenceElement.nextSibling);
}

//example usage
var newElement = document.createElement("div");
    newElement.innerHTML = "my New Div Text";
var myCurrentElement= document.getElementById("myElementID");
    insertAfter(newElement, myCurrentElement);

Example 3: add html after div jquery

$( ".inner" ).after( "<p>Test</p>" );

Example 4: append after an element jquery

Suppose you have to append as below scenario

<select name="username">
  <option>Select name</option>
------	i wants my array data gets iterate here  ------
</select>

Js:
$("select option").after(data);

/*
I hope it will help you.
Namaste _/\_
*/

Example 5: js append html in div after

//Use Jquery
//Include this in your <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

// This over writes any existing data in the element
// To prevent you can just create a new div under your element

<yourElement>
	<div id='<your element id here>'>
		<!--Your Jquery will be rendered here--> 
	</div>
</yourElement>

$('#<your element id here>').html(data);

Tags:

Javascript Example

Recent Posts