通过修改 DOM 的文本内容，动态改变网页的内容。

MINX_minx

于 2022-10-31 23:09:39 发布

阅读量489

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript html

本文链接：https://blog.youkuaiyun.com/MINX_minx/article/details/127625351

博客介绍了前端开发中，将文本内容添加或更新到任意标签位置的两种情况，即文本中标签是否被解析。总结指出，文本含标签时推荐用某方法，否则建议用某属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

innerText 将文本内容添加/更新到任意标签位置，文本中包含的标签不会被解析。

<script>
  // innerText 将文本内容添加/更新到任意标签位置
  const intro = document.querySelector('.intro')
  // intro.innerText = '嗨~ 我叫李雷！'
  // intro.innerText = '<h4>嗨~ 我叫李雷！</h4>'
</script>

innerHTML 将文本内容添加/更新到任意标签位置，文本中包含的标签会被解析。

<script>
  // innerHTML 将文本内容添加/更新到任意标签位置
  const intro = document.querySelector('.intro')
  intro.innerHTML = '嗨~ 我叫韩梅梅！'
  intro.innerHTML = '<h4>嗨~ 我叫韩梅梅！</h4>'
</script>

总结：如果文本内容中包含 html 标签时推荐使用 innerHTML，否则建议使用 innerText 属性。