Inserting an Element Using insertbefore JavaScript

Summary: insertbefore javascript is a function that enables you to insert an element before the specified node in DOM. There are three different ways insertbefore can be used: insertbefore, insertafter, and insertinside. This blog post will discuss which of these functions should be used for your specific situation.

Inserting elements using insertbefore JavaScript

One way insertbefore can be used is when you need to insert an element inside another node. For example: “Before the paragraph with text, insert a new paragraph” would insert the specified paragraph before the first paragraph in your content. The following snippet will insert a link after every sentence of my post:

Syntax: element.insertBefore(links,refrence)

Example:

var links = document.createElement('a');

var parentNode= document.getElementsByTagName("p");

parentNode.insertBefore(links, parentNode);

How insertbefore() works:

  • First, we need an element that would be inserted, so we create an element “a”.
  • In the second line, we select an element where we want to insert the links element.
  • Now we use the insertBefore() for inserting the anchor element in the paragraph.

Parameters:

insertBefore function needs two parameters and both parameters are required. both parameters are elements. The first parameter is to be inserted and the second one is where to be insrted.

Example:

<ul id="menu">

    <li>galary</li>   

    <li>About</li>

    <li>Contact</li>

</ul>

let menu = document.getElementById('menu');

let li = document.createElement('li');

li.textContent = 'Home';

menu.insertBefore(li, menu.firstElementChild);

Description:

select the menu by using document.getElementById

-Next we create an element by using document.createElement.

-Then we need to add some text in our li so, we use textContent

-Finally, use the insertBefore Function for inserting our li.

Putting all together:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>JavaScript insertBefore()</title>

</head>

<body>

    <ul id="menu">

        <li>Services</li>

        <li>About</li>

        <li>Contact</li>

    </ul>

    <script>

        let menu = document.getElementById('menu');

        let li = document.createElement('li');

        li.textContent = 'Home';

        menu.insertBefore(li, menu.firstElementChild);

    </script>

</body>

</html>

InsertAfter Fucntion:

We can also insert an element after a node element by using insertAfter() in javascript. insertAfter() is similar to insertBefore but instead of inserting before the selected node, it inserts after.

Syntax:

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

Description:

If we have the same element and insert an additional one at the end by using insert(), that would be considered as adding content over another existing.

The order in which you want to insert should not matter because insertAfter pushes down all the items in the DOM tree.

For example, if we insert an element after a list item by using insertAfter() then the new element will be inserted at the end of that particular list and before any other elements or text nodes that are below it in the DOM tree.

Example:

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

To insert another node as a sibling to this one without adding it to the DOM, use insertBefore().

To insert an element as a child of another node by using insertAfter(), we should make sure that there is no other item in between it.

The inserted content will be placed before any other sibling nodes and after any children of this node that have already been added to the document tree.

InsertBefore vs insertAfter

The insertAfter() method inserts new content after the last child node of referenceNode. The insertBefore() method inserts new content before referenceNode’s first child node. As you will see in this post, both methods are used to insert an element at a certain point in DOM tree:

– insertAfter(): Inserts an element as a child of referenceNode

– insertBefore(): Inserts an element as a sibling of another node

To insert an element using the insertAfter() method, we do not need to add it to the DOM because this is done automatically. This process will insert new content after any other siblings and before any children that have already been added to referenceNode.

– insertBefore(): To insert an element using the insertBefore() method, we need to add it to the DOM before adding any other children or siblings that referenceNode may have already had added

We will use appendChild(), a more specific JavaScript function than insertAfter(), which is why this post does not cover how to insert an element using insertAfter().

Conclusion:

Inserting an element using insertbefore JavaScript is a good way to place the text, image, or video just before another. The code for inserting an element into a page with this syntax looks like this – insertBefore() and it works by passing in two arguments, the first being the DOM node that will be inserted after and the second argument is optional which defines where we want our content to appear on the screen relative to its container. This article has provided you with some great insight about how you can use insertbefore JavaScript when adding elements of different types onto your web pages!

Follow us on Facebook for daily updates

Also Read : Fun with HTML Text Tags: Learn About Some of The Fun And Interesting Tags

Leave a Comment