WebAPI基础 设置/修改DOM元素内容 innerText和innerHTML的使用

 

 

这里我们用一个简单的div举例

    <div>
        爱听五月天
    </div>

css样式：

    div {
            margin: 100px auto;

            width: 300px;
            height: 200px;
            border: 1px solid pink;

            text-align: center;
            line-height: 200px;
        }

初始效果：

 

 

如果想要修改标签元素的里面的内容，则可以使用以下方式：

一、innerText 添加或修改标签的内容，不会解析文本中包含的标签

基本格式：对象.innerText = ‘要设置/修改的内容’

        // 1、获取标签对象
        let div = document.querySelector('div')
        // 2、修改标签里面的内容
        // 2.1 innerText 不解析标签
        div.innerText = '爱听陈奕迅'

二、innerHTML 添加或修改标签的内容，会解析标签

基本格式：对象.innerHTML = ‘要设置/修改的内容’

不加标签时与innerText的效果是一样的

     div.innerHTML = '音乐应当使人类的精神爆发出火花'

 

加标签：

        // 2.2 innerHTML 解析标签
        div.innerHTML = '<h3><i>音乐应当使人类的精神爆发出火花</i></h3>'

总结：innerText 只识别内容，不解析标签；innerHTML 能够解析标签。不加标签时二者效果相同，所以推荐使用innerHTML。