JavaScript中innerHTML与innerText，createTextNode的区别

Posted 2021-02-01 Yanyu.Wu

innerhtml和innerText

它们都会把元素内内容替换掉，区别在于： innerHTML 会把替换内容里的 HTML 标记解释执行。 innerText 会把替换内容里的 HTML 标记原样输出而不执行。

例如有如下代码：

var content = "<b>这是对innerHTML和innerText的测试</b>" ; // 假设 e 为网页内某元素

e.innerHTML = content ; // 显示结果为  这是对innerHTML和innerText的测试

e.innerText = content ; // 显示结果为  <b>这是对innerHTML和innerText的测试</b>

 

innerHTML和createTextNode

innerHTML可以识别标签，而createTextNode会将内容全部转化为字符串

例如有如下代码：

var content = "<b>这是对innerHTML和innerText的测试</b>" ; // 假设 e 为网页内某元素

e.innerHTML = content ; // 显示结果为  这是对innerHTML和innerText的测试

var text=createTextNode(content) ;

e.appendChild(text)// 显示结果为  <b>这是对innerHTML和innerText的测试</b>

 

这样看来innerText和createTextNode的基本用法是一样的，都无法识别标签并转化为html文件。

但是innerText是一次性修改，会将标签里所有内容修改，createTextNode可以逐条插入，避免整体的修改。