Skip to content
Related Articles

Related Articles

Improve 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:

 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 :