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 =  
"https://d3js.org/d3.v4.min.js">  
  </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>