D3.js selection.html()函数

selection.html()函数用于在所有选定元素上设置内部 HTML。如果该值是恒定的，则所有元素都被赋予相同的值。空值将清除元素的内容。

句法：

selection.html([value]);

参数：此函数接受如上所述和如下所述的单个参数：

• 值：它是字符串类型，将 HTML 设置为文档。

返回值：此函数不返回任何内容。

示例 1：在以下代码中，HTML“p”元素内容更改为“粗体”文本。

HTML

  

    
    
  
    
    
  
    
        p {
            background-color: #f2f2f2;
            padding: 10px;
            width: 200px;
            line-height: 5px;
        }
  
        p:hover {
            background-color: grey;
            padding: 10px;
            cursor: pointer;
        }
    

  

    
        
            GeeksforGeeks
        
          
        D3.js selection.html() Function
  
        Click Here!
    
  
    
        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);
    

  

输出：

示例 2：以下示例使用 null 清除内容。

HTML

  

    
    
  
    
    
    
        p {
            background-color: #f2f2f2;
            padding: 10px;
            width: 200px;
            line-height: 5px;
        }
  
        p:hover {
            background-color: grey;
            padding: 10px;
            cursor: pointer;
        }
    

  

    
        
            GeeksforGeeks
        
  
        D3.js selection.html() Function
  
        Click Here
    
  
    
        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);
    

  

输出：