js中innerHTML与innerText的用法与区别

1、浏览器能够解析出标签，可以写标签并且输出到页面 。或理解 属性设置或返回表格行的开始和结束标签之间的 HTML。

box.innerHTML += '<p>我是通过innerHTML添加的P标签</p>';

2、用 document.getElementById(“demo”).innerHTML 输出时，当 + 两边的数据类型都为

document.getElementById("demo").innerHTML = 1 + 9 + 8; // 输出为 18

3、但如果 + 两边的数据类型不同时，这个 + 就类似于句子里的“和”的意思。

document.getElementById("demo").innerHTML = 1 + 9 + "onlyA" + 8; // 输出 10onlyA8。

innerText

1、不能解析标签，只能输出内容

box.innerText = '<h1>我是h1</h1>' // 页面没有变化

**

textContent

**
1、同样不能解析标签，只能输出内容。

box.textContent = '<h1>我是h1</h1>'; // 页面没有变化

区别

渲染标签 innerHTML
渲染文本 innerText或者textContent

**

提醒：使用 innerHTML 时若与 createElement 同级并且 innerHTML 在后会出现事件无法绑定，原因是
innerHTML 后父级 DOM 重新加载。

**