innerHTML 与 innerText的用法与异同

来源：互联网发布：刷svip永久软件编辑：程序博客网时间：2024/05/17 05:57

innerHTML与innerText详解

在实际开发中遇到过很多需要操作某个元素节点内容的情况，虽然dom提供了操作的方法如获得文本节点后在操作nodeValue属性，但是这样就显得很麻烦了，所以dom扩展中就加入了这两个属性来方便操作节点的值，自己用的时候遇到了一些问题，也查过一些资料，这次对他们两的用法进行一次详细的解读

用法：innerHTML操作元素的值时会包括html标签，innerText操作的是纯文本(记住是纯文本);例如：<div id="div"><p>我爱你js</p></div>,var value = document.getElementById("div").innerHTML;此时value的值是<p>我爱你js</p>;而innerText的值则会是：我爱你js

兼容性：innerText在火狐中不兼容,它对应的属性是textContent；解决方法

function getInnerText(elementObj){

return (typeof elementObj.textContent == "string") ? (elementObj.textContent) :(elementObj.innerText);

}

插入解析差异：用innerText进行插入内容时标签不会解析而是会将标签进行转义,而innerHTML则会解析html标签

项目经验：用innerHTML的机会可能会大很多，但是不是不会用innerText，用innerText时一定要注意它的兼容性问题，最后尽量控制用这两个属性的次数,因为它们的内部实现性能有点差

0 0