D3.js creator() Function
Last Updated :
18 Aug, 2020
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 >
< 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 >
< 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:
Share your thoughts in the comments
Please Login to comment...