HTML DOM Range insertNode() Method

The insertNode() method inserts a node at the start of the Range.

The updated Range consists of new inserted node before the Range of the last Range content.

Syntax:

range.insertNode( newNode );

Parameters: This method accepts single parameter as mentioned above and described below:

newNode: The Node to be inserted at the starting of the range.

Return value: This method does not return any value.

Example: This example shows how to insert a node before the range content using insertNode() method. To Clarify, changes in range content, we had console logged the new range in string text using toString() method.

HTML

<!DOCTYPE html>

<html>
 
<head>

    <title>

        HTML DOM range insertNode() method

    </title>

</head>
 
<body>

    <h1>GeeksforGeeks</h1>
 
<p>Range Content</p>
 
    <button onclick="insert()">

        Click Here to insert the Node

    </button>

    <p id="element">Node element </p>
 
    <script>

        var range = document.createRange();

        range.selectNode(document

            .getElementsByTagName("p").item(0));

        const element = document

            .getElementById('element');
 
        console.log("Before Button Click:", 

                            range.toString());
 
        function insert() {

            range.insertNode(element);

            console.log("After  Button Click:", 

                            range.toString());

        }

    </script>

</body>
 
</html>