D3.js selection.append() Function

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:
Before clicking the “click me” element:
After 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>
Output:
Before clicking the “click me” button:
Before clicking the “click me” button:
After clicking the “click me” button:
After clicking the “click me” button:
D3.js
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.