D3.js selection.html() Function
Last Updated :
31 Aug, 2020
The selection.html() function is used to set the inner HTML on all the selected elements. If the value is constant then all the elements are given same value. A null value will clear the content of the element.
Syntax:
selection.html([value]);
Parameters: This function accepts single parameter as mentioned above and described below:
- Value: It is of type string that sets the HTML to the document.
Return Value: This function does not return anything.
Example 1: In the following code, the HTML “p” element content is changed to “bold” text.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" path1tent =
"width=device-width, initial-scale=1.0" >
</ script >
< style >
p {
background-color: #f2f2f2;
padding: 10px;
width: 200px;
line-height: 5px;
}
p:hover {
background-color: grey;
padding: 10px;
cursor: pointer;
}
</ style >
</ head >
< body >
< div >
< h1 style = "color:green;" >
GeeksforGeeks
</ h1 >
< h4 >D3.js selection.html() Function</ h4 >
< p >Click Here!</ p >
</ div >
< script >
function func() {
// Selecting all p and setting
// the innerHTML of the p
var chk = d3.selectAll("p")
.html("< b >This is from .html</ b >");
var text = document.querySelector("p");
}
let btn = document.querySelector("p");
btn.addEventListener("click", func);
</ script >
</ body >
</ html >
|
Output:
Example 2: The following example clears the content using null.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" path1tent =
"width=device-width,initial-scale=1.0" >
</ script >
< style >
p {
background-color: #f2f2f2;
padding: 10px;
width: 200px;
line-height: 5px;
}
p:hover {
background-color: grey;
padding: 10px;
cursor: pointer;
}
</ style >
</ head >
< body >
< div >
< h1 style = "color:green;" >
GeeksforGeeks
</ h1 >
< h4 >D3.js selection.html() Function</ h4 >
< p >< b >Click Here</ b ></ p >
</ div >
< script >
function func() {
// Selecting p and setting the
// innerHTML of the p
var chk = d3.selectAll("p")
.html(null);
var text = document.querySelector("p");
}
let btn = document.querySelector("p");
btn.addEventListener("click", func);
</ script >
</ body >
</ html >
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...