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!
