Open In App

D3.js selection.insert() Function

Last Updated : 31 Aug, 2020
Improve
Improve
Like Article
Like
Save
Share
Report

The selection.insert() function is used to append a new element of the given type at the specified position. It inserts a new element before the selector for each selected element.

Syntax:

selection.insert(type[, before]);

Parameters: This function takes two parameters which are given above and described below:

  • type: It is a string that defines the type of element.
  • before: It is a string that defines an element before which a new element is inserted.

Return Values: This function must return the child element before which the new element is inserted.

Example 1: When elements are inserted before all elements in the selection.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" path1tent=
        "width=device-width, initial-scale=1.0">
  
    <script src="https://d3js.org/d3.v4.min.js">
    </script>
  
    <style>
        h1 {
            color: green;
        }
  
        p {
            background-color: #f2f2f2;
            padding: 10px;
            width: 300px;
            line-height: 5px;
        }
  
        p:hover {
            background-color: grey;
            padding: 10px;
            cursor: pointer;
        }
  
        div {
            height: 50px;
            background-color: green;
            margin: 10px;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
  
    <h4>D3.js selection.insert() Function</h4>
  
    <span>
        Div will be inserted before "Click Here!"
    </span>
    <p id="p"><b>Click Here!</b></p>
  
    <script>
        function func() {
            // Selecting all p and appending a DIV
            // before the b tag to each p tag
            var chk = d3.selectAll("p")
                .insert("div", "b");
        }
        clickme = document.getElementById("p");
        clickme.addEventListener("click", func);
    </script>
</body>
  
</html>


Output:

Before clicking the click “Click Here” element:

Before clicking the click “Click Here” element:

Example 2: When elements are inserted before first elements in the selection.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" path1tent=
        "width=device-width, initial-scale=1.0">
                      
    <script src="https://d3js.org/d3.v4.min.js">
    </script>
  
    <style>
        h1 {
            color: green;
        }
  
        div {
            width: 300px;
            color: #ffffff;
            height: 50px;
            background-color: green;
            margin: 10px;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
  
    <h4>D3.js selection.insert() Function</h4>
  
    <div><span>Click Here!</span></div>
  
    <script>
        function func() {
            // Selecting div and Inserting 
            // <b> tag before <span> tag
            var div = d3.select("div")
                .insert("b", "span");
            var b = document.querySelector("b");
            b.innerText = "This <b> tag is appended. ";
        }
        btn = document.querySelector("div");
        btn.addEventListener("click", func);
    </script>
</body>
  
</html>


Output:

Before clicking the “Click Here” element:

After clicking the “Click Here” element:



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads