D3.js selection.html() Function - GeeksforGeeks

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 src="https://d3js.org/d3.v4.min.js">    </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 src="https://d3js.org/d3.v4.min.js">    </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:
D3.js
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Difference between var, let and const keywords in JavaScript
Difference Between PUT and PATCH Request
JavaScript | Promises
How to get character array from string in JavaScript?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?
Difference between var, let and const keywords in JavaScript