操作DOM元素内容

• DOM对象都是根据标签生成的,所以操作标签,本质上就是操作DOM对象。
• 就是操作对象使用的点语法。
• 如果想要修改标签元素的里面的内容，则可以使用如下几种方式：
  • 对象.innerText 属性
  • 对象.innerHTML 属性

innerText 属性

将文本内容添加/更新到任意标签位置

显示纯文本，不解析标签

<div class="box">我是文字内容</div>

<script>
    let div = document.querySelector('.box')
    console.log(div.innerText)

    div.innerText = "innerText修改后的内容"
</script>

效果：

innerHTML 属性

将文本内容添加/更新到任意标签位置

会解析标签，多标签建议使用模板字符

  <div class="box">我是文字内容</div>

  <script>
    let div = document.querySelector('.box')
    console.log(div.innerText)
    
    div.innerHTML = "<b>innerHTML修改后的内容</b>"
  </script>

效果：

小结

设置/修改DOM元素内容有一下两种方式：

1. 元素.innerText
2. 元素.innerHTML

两者的区别：

1. innerText 只识别文本，不解析标签
2. innerHTML 能识别文本 能解析标签

可优先使用innerHTML