How to Add an Element After Another Element

How to insert an element after another element in JavaScript without using a library?

referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);

Where referenceNode is the node you want to put newNode after. If referenceNode is the last child within its parent element, that's fine, because referenceNode.nextSibling will be null and insertBefore handles that case by adding to the end of the list.

So:

function insertAfter(newNode, referenceNode) {
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

You can test it using the following snippet:

function insertAfter(referenceNode, newNode) {
  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

var el = document.createElement("span");
el.innerHTML = "test";
var div = document.getElementById("foo");
insertAfter(div, el);

<div id="foo">Hello</div>

How to write an element just after another with javascript?

Update: This question may not answer the question properly but it was selected as the right answer. So I am adding the correct answer here since most people don't scroll past it and the original author hasn't accessed Stackoverflow for many years now.

Correct answer from @RobG

var div = document.getElementById( 'div' );
var newText = document.createElement( 'textarea' ); // create new textarea
div.parentNode.insertBefore( newText, div.nextSibling );

Old Irrelevant answer:

~~You can use the appendChild method to add a new element~~

~~HTML~~

<div id='div'>
  <textarea></textarea>
</div>

~~Javascript~~

var div = document.getElementById('div');

var newText = document.createElement('textarea'); // create new textarea

div.appendChild(newText); // add it to the div

~~Resulting HTML~~

<div id='div'>
  <textarea></textarea>
  <textarea></textarea>
</div>

How can I add an element after another element?

try using the after() method:

$('#bla').after('<div id="space"></div>');

Documentation

How can I append an element after another in the document head?

If you want your element to be added after target, instead of using target.appendChild(element); which appends a child element to target, use the following:

target.parentNode.insertBefore(element, target.nextSibling);

Select an element after another element in JavaScript

The next element is stored in nextElementSibling property of the specific element on javascript.

Append element as sibling after element?

Check out Node.insertBefore() and Node.nextSibling (fiddle):

var myimg = document.getElementById('myimg');
var text = document.createTextNode("This is my caption.");
myimg.parentNode.insertBefore(text, myimg.nextSibling)

or Element.insertAdjacentHTML() (fiddle):

var myimg = document.getElementById('myimg');
myimg.insertAdjacentHTML("afterend", "This is my caption.");

move one element after another element in arraylist

Thank you all, I finally used this code:

 public static void moveElementAfter(ArrayList<String> arrayList,String src, String dst) {
    int sourceIndex = arrayList.indexOf(src);
    int destIndex = arrayList.indexOf(dst);
    // copy source element after destination
    arrayList.add(destIndex + 1, src);

    if (sourceIndex < destIndex) {
        // * the source element is moved forward in the array list
        // remove the source element
        arrayList.remove(sourceIndex);
    } else {
        // * the source element is moved backward in the array list
        // remove the source element
        int sourceLastIndex = arrayList.lastIndexOf(src);
        arrayList.remove(sourceLastIndex);
    }// end if
    System.out.println(arrayList);
}// end method

Demo

System.out.println("move A after C");
ArrayList<String> arrayList1  = new ArrayList<>(Arrays.asList("A", "B", "C", "D"));
moveElementAfter(arrayList1, "A", "C");

System.out.println("move C after A");
ArrayList<String> arrayList2  = new ArrayList<>(Arrays.asList("A", "B", "C", "D"));
moveElementAfter(arrayList2, "C", "A");

Output

[B, C, A, D]
[A, C, B, D]