How to Insert an Element After Another Element in JavaScript Without Using a Library

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

The best way of inserting a div after a specific element with javascript

const test = document.getElementById('test');
const five = document.getElementById('five');

five.parentNode.insertBefore(test, five);

dynamically adding a button in html page with simple Javascript without any framework or library

Most of the things explained in comments so read it first

// arrow function to create and append download button into any element
// it only takes url of file that will download.
const createBtn = (URL) => {
  // create button element
  const downloadBtn = document.createElement("button");
  // you can set any name of id according to your choice
  downloadBtn.setAttribute("id", "downloadBtn");
  // create anchor element
  const downloadLink = document.createElement("a");
  // set any thing in inner text
  downloadBtn.innerText = "Download Image";
  // set download attribute to true
  downloadLink.setAttribute("download", true);
  // set url with URL 
  downloadLink.setAttribute("href", URL);
  // append button element into anchor element
  downloadLink.appendChild(downloadBtn);
  // get that element in which download button will append
  const container = document.getElementById("container");
  // append download button into any element of your choice
  container.appendChild(downloadLink);
};
// url of file
const URL = "https://images.pexels.com/photos/863963/pexels-photo-863963.jpeg?cs=srgb&dl=pexels-blaque-x-863963.jpg&fm=jpg"
// call createBtn function with URL
createBtn(URL);

<!-- The element in which download button will be appended -->
<div class="container" id="container"></div>

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.");

Dynamic script tag not loading, can't see network traffic for it

If I'm understanding the problem correctly, you're trying to dynamically load a script based off the window's conditional width. In addition, based on the comment, it sounds like you need the updated script to load right after it has been placed in the document. To do this, try the following solution:

<script id="init-script" type="text/javascript">
    function insertAfter(referenceNode, newNode) {
        referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
    }

    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.async = 'async';
    script.defer = 'defer';
    script.crossOrigin = 'anonymous';
    if(window.width < 480) {
        script.src = "Script if less than 480px";
    } else {
        script.src = "Script if greater than 480px";
    }
    insertAfter(document.getElementById('init-script'), script);
</script>

What this does:

The above script is doing a few things.

1. First, it defines a function called insertAfter() that will effectively insert your new element after this script tag but before any additional siblings.

2. Second, it then defines the script tag using the attributes you defined above and also provides the conditional logic based on the window.width < 480 to load the appropriate script source value.

3. Finally, it passes the current script id element found using document.getElementById and the newly created script element to your original function which will append it directly below the script tag. Depending on where you place the init-script it will either append directly below in the head or body element.

Credit:

insertAfter() function derived from this answer: How to insert an element after another element in JavaScript without using a library?

Passing a dynamically created button's text content to another element

So how is this newListButton supposed to know what is has to do? You have to tell it to him, by attaching an eventListener or creating an onlick handler.

---

Related Topics