Skip to content
Related Articles

Related Articles

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 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:

My Personal Notes arrow_drop_up
Recommended Articles
Page :