1.body代码

    <div id="box">
        <p>
            <span>各位, 早上好~~~</span>
        </p>
    </div>

2.操作属性

我们获取到元素以后, 可以直接操作 DOM 的属性, 然后直接把效果展示在页面

2.1 innerHTML

获取元素内部的 HTML 结构

我们也可以直接给这个属性重新赋值, 达到修改页面的效果

    var oDiv = document.querySelector('#box')
    console.log(oDiv)
    console.log(oDiv.innerHTML)
    oDiv.innerHTML = '<p><span>各位, 早上好~~~这个文本是通过JS来设置的</span></p>'

2.2 innerText

获取元素内部的文本 (只能获取到文本, 获取不到 html 标签)

我们也可以直接给这个属性重新赋值, 达到修改页面的效果

    console.log(oDiv.innerText)
    oDiv.innerText = '<p><span>各位, 早上好~~~这个文本是通过JS来设置的</span></p>'