innerText和innerHTML区别

尽管DOM带来了动态修改文档的能力，但对开发人员来说，这还不够。IE4.0为所有的元素引入了两个特性，以更方便的进行文档操作，这两个特性是innerText和innerHTML。 其中innerText特性用来修改起始标签和结束标签之间的文本的。例如，假设有个空的

元素，希望将其变成

New text for the div.

。 用DOM实现时，要这么做： oDiv.appendChild(document.createTextNode("New text for the div.")); 这段代码并不难读，但是很冗长。 如果使用innerText,只要这么做： oDiv.innerText = "New text for the div."; 使用innerText,代码更加简洁，并且更容易理解。另外，innerText会自动将小于号、大于号、引号和&符号进行HTML编码，所有是毫不需当心特殊字符： oDiv.innerText = "New text for the

."; 这一行代码的执行结果是

New text for the <div/>.

。 但如何一定要在元素中包含HTML标签呢？这就是innerHTML所要解决的问题。应用innerHTML特性，可以直接给元素分配HTML字符串，而不需考虑使用DOM方法来创建元素。例如，假设一个空

要变成

HelloWorld

。使用DOM，要用下面的代码： var oStrong = document.createElement("strong’); oStrong.appendChild(document.createTextNode("hello")); var oEm = document.createElement("em"); oEm.appendChild(document.createTextNode("World")); oDiv.appendChild(oStrong); oDiv.appendChild(document.createTextNode("")); oDiv.appendChild(oEm); 而使用innerHTML,代码就变成： oDiv.innerHTML = "HelloWorld"; 七行代码一下就变成一行，这就是innerHML的威力！ 还可以使用innerText和innerHTML来获取元素的内容。如果元素只包含文本，那么innerText和innerHTML返回相同的值。但是如果同时包含文本和其他元素，innerText将只返回文本的表示，而innerHTML，将返回所有元素和文本的HTML代码。下面的表格列出了根据特定代码innerText和innerHTML返回的不同值。 代码 innerText innerHTML

Hello world

"Hello world" "Hello world"

Helloworld

"Hello world" "Helloworld"

"" "" 最后，通过将innerText赋值给它自身，表示从指定的元素中删除所有的HTML标签。 oDiv.innerText = oDiv.innerText;