Skip to content

DOM insertbefore()

We may want to add a new item to an HTML document. The first step is to create the node (element) that you want to add, the next step is to find the location in the document where you want to add it, and the last step is to do so. The syntax used to create a node is very simple, you only call a method (method) of the document object.

  • createElement(): Creates a node of the specified name.
  • createTextNodeallows you to add text to the node you specify.
  • appendChild(): allows you to set where you want to node.
  • insertBefore(): Used to add / move an existing item.
  • removeChild(): removes a specified child node of the specified item.
  • replaceChild():replaces a child node of the specified node with another node.
  • cloneNode(): creates a copy of a node, and returns the copy.
  • adoptNode(): This method is used to accept a node in another document.
  • hasChildNodes():Returns true if the specified node has a child node. Returns a false node if the specified node does not have a child node.
  • importNode(): This method imports another node from a document.

HTML DOM insertbefore() Method

The insertBefore () method inserts a node as a child, just in front of an existing child you specify.
You can use the insertBefore () method to add / move an existing item.

Syntax:

node.insertBefore (new, target)

new: The node object you want to add
target: You must give a node or null values. Providing different or invalid values ​​may be different in different browser versions.


insertbefore Examples

Example 1

insertBefore Example
<body>

    <button onclick="divFunction()">ADD div</button>
    <button onclick="txtFunction()">ADD text</button>
    <button onclick="insertFunction()"></button>

    <script>


        let div = document.createElement("div");
        function divFunction() {
            document.body.appendChild(div);
        }

        let txt;
        let nul = null;
        function txtFunction() {
            txt = document.createTextNode("JavaScript");
            document.body.appendChild(txt);
        }

        function insertFunction() {
            div.insertBefore(txt,nul);
        }

    </script>
</body>

Example 2

insertBefore Example
<body>

    <ul id="eat">
        <li>Hamburger</li>
        <li>Doner</li>
        <li>Kebap</li>
    </ul>

    <ul id="drink">
        <li>Cola</li>
        <li>Lemonade</li>
        <li>Water</li>
    </ul>

    <button onclick="insertFunction()">click</button>

    <script>

        function insertFunction() {
            let eat = document.getElementById("eat").lastChild;
            let drink = document.getElementById("drink");
            drink.insertBefore(eat, drink.childNodes[0]);
        }

    </script>
</body>

7 Comments »

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: