innerText和innerHTML区别

机构:上海内威培训 时间:2016-01-28 点击:562

  尽管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的威力!

  了解更多关于软件方面的知识,请访问上海软件培训学校

 

返回顶部