textContent、innerText的用法 在文档中插入纯文本

在JavaScript中，有两个常用的属性可以用来修改页面元素的文本内容，它们分别是 textContent 和 innerText。本文将介绍它们的用法，并以实例演示如何向文档中插入纯文本。

textContent

textContent 属性返回或设置指定元素中的文本内容，包括所有后代元素中的文本内容。使用 textContent 属性设置文本内容时，所有HTML标签和实体引用都会被视为文本。

下面是一个示例：

<div id="myDiv">
  Hello <b>world</b>!
</div>

let div = document.querySelector('#myDiv');
console.log(div.textContent); // 输出 "Hello world!"

// 设置文本内容
div.textContent = "Goodbye!";
console.log(div.innerHTML); // 输出 <div id="myDiv">Goodbye!</div>

innerText

innerText 属性与 textContent 属性类似，它也返回或设置指定元素中的文本内容，不同之处在于它会忽略HTML标签，只返回其中的纯文本。

下面是一个示例：

<div id="myDiv">
  Hello <b>world</b>!
</div>

let div = document.querySelector('#myDiv');
console.log(div.innerText); // 输出 "Hello world!"

// 设置文本内容
div.innerText = "Goodbye!";
console.log(div.innerHTML); // 输出 <div id="myDiv">Goodbye!</div>

可以看到，当使用 innerHTML 属性获取元素的HTML内容时，修改了 textContent 或 innerText 属性的值，对应的HTML内容也会随之改变。

在文档中插入纯文本

插入纯文本到文档中的常见方法是使用 innerHTML 属性，但是这种方法很容易被注入恶意脚本，从而引发安全问题。为了避免这种情况，可以使用 textContent 或 innerText 属性来插入文本内容。

下面是一个示例：

<div>这里是一个空的div</div>
<button id="addText">添加文本</button>

<script>
  let div = document.querySelector('div');
  let button = document.querySelector('#addText');
  button.addEventListener('click', function(){
    div.textContent = 'Hello, world!'; // 插入纯文本
  });
</script>

当用户点击按钮时，文档中的 div 元素将被插入纯文本 Hello, world!。

总之，使用 textContent 或 innerText 属性来操作文本内容，既简单又安全，可以有效避免注入攻击。

阅读剩余 31%