Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

D3.js selection.append() Function

  • Last Updated : 06 Sep, 2020

The selection.append() function is used to append a new element to the HTML tag name as given in the parameters to the end of the element. If the type that is given is a function then it must be evaluated for each element that is in the selection.

Syntax:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

 selection.append(type);

Parameters: This function takes only one parameter which is given above and described below.

  • type: This parameter takes a string that defines the type of the element.

Return Value: This function must return an element to be appended at the end.



Example 1: In the following example, elements are appended to each selected element.

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 {
            width: 50px;
            height: 50px;
            background-color: green;
            margin: 10px;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h4>D3.js | selection.append() Function</h4>
  
    <p><b>Click me</b></p>
    <p><b>Click me</b></p>
  
    <script>
        function func() {
            // Selecting all p and
            // Appending a DIV to each p tag
            var chk = d3.selectAll("p")
                .append("div");
            var div = document.querySelector("div");
            console.log(div)
        }
        let btn = document.querySelector("p");
        btn.addEventListener("click", func);
    </script>
</body>
  
</html>

Output:

  • Before clicking the “click me” element:

  • After clicking the “click me” element:

Example 2: In the following example elements are appended only to the first element.

HTML




<!DOCTYPE html> 
<html lang="en"
<head
    <meta charset="UTF-8"
    <meta name="viewport"
            path1tent="width=device-width, 
                    initial-scale=1.0">   
</head
<style>
    h1{
        line-height: 5px;
        color: green;
    }
    h1, h2, p, h4, h5, h6{
        background-color: #f2f2f2;
        padding:20px;
        width: 300px;
        line-height: 5px;
    }
    p:hover{
        background-color: grey;
        cursor: pointer;
    }
    div{
        width: 50px;
        height: 50px;
        background-color: green;
        margin:10px;
    }
</style
<body>  
    <h1>Geeks for geeks</h1>
    <p>Click me.</p>
    <p>Click me.</p>
  <script src
  </script>
  <script
  function func(){
            // Selecting  p and
            // Appending a DIV to the p tag
            // Only first p tag is effected
            var chk = d3.select("p")
                        .append("b");
            var b=document.querySelector("b");
            b.innerText=" This <b> tag is appended."
        }
    let btn=document.querySelector("p");
    btn.addEventListener("click", func);
  
  </script
</body
</html>

Output:

  • Before clicking the “click me” button:

  • After clicking the “click me” button:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!