Open In App

HTML DOM Range insertNode() Method

Improve
Improve
Like Article
Like
Save
Share
Report

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>


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


Last Updated : 12 Jul, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads