The d3.creator() function is used to return a function that creates an element whose name is given as a parameter in the function.
Syntax:
d3.creator( name );
Parameters: This function accepts single parameter as mentioned above and described below:
- name: It is the name of the container or HTML tag to be created.
Return Value: It returns a function.
Example 1: In this example, adding the div element within the body.
HTML
<!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF-8">     <meta name="viewport" path1tent=         "width=device-width,initial-scale=1.0">     <script src=     </script>     <script src=     </script>       <style>         div {             background-color: green;             color: honeydew;             width: fit-content;             padding: 10px;         }     </style> </head>   <body>     <!-- No div tag is added here -->      <script>         let selection = d3.select("body")           // Creating and appending         // a div to the body         selection.append(d3.creator("div"));         let div = document.querySelector("div")                   div.innerText =             "Div tag created using d3.creator()"     </script> </body>   </html> |
Output:
Example 2: In this example, appending multiple tags to the body.
HTML
<!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF-8">     <meta name="viewport" path1tent=         "width=device-width,initial-scale=1.0">     <script src=     </script>     <script src=     </script>       <style>         div {             background-color: green;             color: honeydew;             width: fit-content;             padding: 10px;             height: 100px;         }     </style> </head>   <body>     <!-- No div tag is added here -->      <script>         var selection = d3.select("body")           // Creating and appending a         // div to the body         selection.append(d3.creator("div"));         var selection = d3.select("body")           // Creating and appending a p         // tag to the div         selection.append(d3.creator("p"));           // Creating and appending a button         // tag to the div         selection.append(d3.creator("button"));         var div = document.querySelector("div")           div.innerHTML =             "Div tag created using d3.creator()"           var div = document.querySelector("p")           div.innerHTML =             "paragraph tag created using d3.creator()"                       var div = document.querySelector("button")           div.innerHTML =             "paragraph tag created using d3.creator()"     </script> </body>   </html> |
Output:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
… [Trackback]
[…] Information to that Topic: geeksforgeeks.org/d3-js-creator-function/ […]