HTML DOM Range insertNode() Method

0 1 1 minute read

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>zambiatek</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>

Output:

Before Click the Button:

After Click the Button:

Supported Browsers:

Google Chrome 1
Edge 12
Firefox 1
Safari 1
Opera 9
Internet Explorer 9

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!