WebAPI-如何向标签中插入内容，innerHTML与innerText的区别

怼烎@ 2023-06-12 13:26 9阅读 0赞

js中可以通过 innerHTML 和 innerText 获取或修改双标签中的内容（只能是双标签）

#### innerText ####

`element.innerText` 可获取或设置指定元素内的文本内容，是从指定标签的起始位置到终止位置的全部文本内容，但是不包括元素内原本的 html 标签、空格和换行符；通过 innerText 设置内容时标签会作为普通文本显示，不会进行解析。

*  `element` 需要获取或修改文本内容的元素对象

注意：

*  当获取文本内容时遇到行内标签且标签单行书写，会用空格隔开文本内容，遇到块级标签会用换行符隔开内容

获取文本内容：

<div id="box">
                  文本内容        
      <h1>          
                  h1标签      
      </h1>
      <h1>h1标签
      	<span>span标签</span>
      </h1>
    </div>
    
    <script> function $(selectors) { return document.querySelector(selectors) } // 获取指定元素中的文本内容 var content = $('#box').innerText // 打印内容 console.log(content) // 内容长度 console.log(content.length) </script>

![在这里插入图片描述][20191113103744453.png]  
修改文本内容：

*  找到元素后使用 `innerText` 直接通过赋值的方式即可修改；需要注意的是指定元素下的所有内容都会被当前内容所覆盖

// 修改文本内容
    $('#box').innerText = '<div>修改了文本内容！</div>'
    // 获取修改后的内容
    console.log($('#box').innerText)

![在这里插入图片描述][20191113140531378.gif]

#### innerHTML ####

`element.innerHTML` 获取或设置指定元素内的内容，从指定标签的起始位置到终止位置的全部内容，包括元素内原本的 html 标签、空格和换行符。

获取标签中的所有内容：

<div id="box">
                  文本内容        
      <h1>          
                  h1标签      
      </h1>
      <h1>h1标签
      	<span>span标签</span>
      </h1>
    </div>
    
    <script> function $(selectors) { return document.querySelector(selectors) } // 获取指定元素中的文本内容 var content = $('#box').innerHTML // 打印内容 console.log(content) // 内容长度 console.log(content.length) </script>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]  
修改内容：

*  找到元素后使用 `innerHTML` 直接通过赋值的方式即可修改，HTML 会被解析；同样需要注意的是指定元素下的所有内容都会被当前内容所覆盖

// 修改内容
    $('#box').innerHTML = '<h1>修改了文本内容！</h1>'
    // 获取修改后的内容
    console.log($('#box').innerHTML)

![在这里插入图片描述][20191113144042697.gif]

[20191113103744453.png]: https://img-blog.csdnimg.cn/20191113103744453.png
[20191113140531378.gif]: https://img-blog.csdnimg.cn/20191113140531378.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191113143532476.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ==,size_16,color_FFFFFF,t_70
[20191113144042697.gif]: https://img-blog.csdnimg.cn/20191113144042697.gif