innerHTML属性，outerHTML属性，textContent属性，innerText属性区别详解

下面我来详细讲解“innerHTML属性，outerHTML属性，textContent属性，innerText属性区别详解”。

一、innerHTML属性

innerHTML是DOM元素的一个属性，用于获取或设置该元素内部的HTML内容。

获取元素内部的HTML内容

<div id="myDiv">
  <p>这是一个段落</p>
  <strong>这是一段强调文本</strong>
</div>

const div = document.getElementById('myDiv');
console.log(div.innerHTML);
// 输出：<p>这是一个段落</p><strong>这是一段强调文本</strong>

设置元素内部的HTML内容

<div id="myDiv"></div>

const div = document.getElementById('myDiv');
div.innerHTML = '<p>这是一个段落</p><strong>这是一段强调文本</strong>';

注意事项

• 当设置innerHTML属性时，原来元素上绑定的事件和数据将会被清空，因此要小心使用。

二、outerHTML属性

outerHTML是DOM元素的一个属性，用于获取或设置该元素和该元素内部的HTML内容。

获取元素及其内部的HTML内容

<div id="myDiv">
  <p>这是一个段落</p>
  <strong>这是一段强调文本</strong>
</div>

const div = document.getElementById('myDiv');
console.log(div.outerHTML);
// 输出：<div id="myDiv"><p>这是一个段落</p><strong>这是一段强调文本</strong></div>

设置元素及其内部的HTML内容

<div id="myDiv"></div>

const newDiv = document.createElement('div');
newDiv.innerHTML = '<p>这是一个段落</p><strong>这是一段强调文本</strong>';

const oldDiv = document.getElementById('myDiv');
oldDiv.outerHTML = newDiv.outerHTML;

注意事项

• 当设置outerHTML属性时，原来元素及其内部的事件和数据将会被清空，因此要小心使用。
• 当获取outerHTML属性时，会包含元素自身和其内部的HTML内容。

三、textContent属性

textContent是DOM元素的一个属性，用于获取或设置该元素内部的纯文本内容。

获取元素内部的纯文本内容

<div id="myDiv">
  <p>这是一个段落</p>
  <strong>这是一段强调文本</strong>
  这是一段普通文本
</div>

const div = document.getElementById('myDiv');
console.log(div.textContent);
// 输出：这是一个段落这是一段强调文本这是一段普通文本

设置元素内部的纯文本内容

<div id="myDiv">
  <p>这是一个段落</p>
  <strong>这是一段强调文本</strong>
  这是一段普通文本
</div>

const div = document.getElementById('myDiv');
div.textContent = '这是新的内容';

注意事项

• 当设置textContent属性时，原来元素上绑定的事件将会被清空，但元素本身不会被删除，因此比innerHTML和outerHTML更安全。

四、innerText属性

innerText是DOM元素的一个属性，用于获取或设置该元素内部的文本内容，但会对包括空格、换行符等在内的所有空白符进行赋值和读取。

获取元素内部的文本内容

<div id="myDiv">
  <p>这是一个段落</p>
  <strong>这是一段强调文本</strong>
  这是一段普通文本
</div>

const div = document.getElementById('myDiv');
console.log(div.innerText);
// 输出：这是一个段落 这是一段强调文本 这是一段普通文本

设置元素内部的文本内容

<div id="myDiv">
  <p>这是一个段落</p>
  <strong>这是一段强调文本</strong>
  这是一段普通文本
</div>

const div = document.getElementById('myDiv');
div.innerText = '这是新的内容';

注意事项

• 与textContent区别，innerText会对包括空格、换行符等在内的所有空白符进行赋值和读取，因此比textContent更常用。
• 当设置innerText属性时，原来元素上绑定的事件将会被清空，但元素本身不会被删除，因此比innerHTML和outerHTML更安全。