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> <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>neveropen</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 neveropen</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:
