元素innerText 和innerHTML 属性的应用与区别

元素innerText 属性

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

为元素设置标签之间的文本内容

特点：innerText不能对内容中的html标签结构进行解析，而是会原样输出

let info = document.querySelector('#info')

info.innerText = 'abc'
info.innerText = '<h3>只识别内容，不能解析html标签,标签会当成字符串</h3>'

注意点：
1. 单标签不可以设置
2. 不会解析内容中的标签结构，会将标签当成当成普通字符串处理 -- 原样输出
3. 如果内容中也有标签会忽略标签，直接输出文本内容

元素.innerHTML 属性

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

特点：为元素设置标签之间的文本内容,如果内容中有html结构，会进行解析

let info = document.querySelector('#info')

info.innerHTML = 'abc'
info.innerHTML = '<h3>会对html标签进行解析</h3>'

 两者的区别：

 let div = document.querySelector('div')   //innerText:获取标签之间的文本内容，标签会被忽略

   console.log(div.innerText)
   -----------------------------------

   console.log(div.innerHTML) 		// innerHTML：获取标签之间的完整结构

注意点：

1. 不管是innerText还是innerHTML 都不能对单标签进行设置
2. innerText和innerHTML会覆盖原始内容
3. 所有表单元素的取值的设置值都是通过value属性，除了 状态值(checked、readonly,disabled,file文件域) 如：textarea 取值： innerText获取空字符串 innerHTML获取默认值，但不能获取用户的输入
4. 如果赋值内容没有标签结构，那么innerText和innerHTML的效果是一样

5.如果innerText或者innerHTML没有赋值，那么就是取值

希望以上可以对你有所帮助！