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

最新推荐文章于 2024-05-07 03:27:42 发布

原创最新推荐文章于 2024-05-07 03:27:42 发布 · 520 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

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

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 属性。