作家
登录

innerText和innerHTML 一些问题分析

作者: 来源:www.28hudong.com 2013-03-30 02:35:46 阅读 我要评论

其中innerText特性用来修改起始标签和结束标签之间的文本的。例如,假设有个空的<div/>元素,希望将其变成<div>New text for the div.</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 <div/>."; 这一行代码的执行结果是<div>New text for the <div/>.</div>。但如何一定要再元素中包含HTML标签呢?这就是innerHTML所要解决的问题。 应用innerHTML特性,可以直接给元素分配HTML字符串,而不需考虑使用DOM方法来创建元素。例如,假设一个空<div/>要变成<div><strong>Hello</strong><em>World</em></div>。使用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 = "<strong>Hello</strong><em>World</em>"; 七行代码一下就变成一行,这就是innerHML的威力! 还可以使用innerText和innerHTML来获取元素的内容。如果元素只包含文本,那么innerText和innerHTML返回相同的值。但是,如果同时包含文本和其他元素,innerText将只返回文本的表示,而innerHTML,将返回所有元素和文本的HTML代码。下面的表格列出了根据特定代码innerText和innerHTML返回的不同值。 代码 innerText innerHTML <div>Hello world</div> "Hello world" "Hello world" <div><b>Hello</b>world</div> "Hello world" "<b>Hello</b>world" <div><span></span></div> "" "<span></span>"后,通过将innerText赋值给它自身,表示从指定的元素中删除所有的HTML标签。 oDiv.innerText = oDiv.innerText;

  推荐阅读

  jQuery 性能优化指南 (1)

1,总是从ID选择器开始继承 在jQuery中最快的选择器是ID选择器,因为它直接来自于JavaScript的getElementById()方法。 例如有一段HTML代码: 复制代码 代码如下:<div id="content"> <form method="post" action="#>>>详细阅读


本文标题:innerText和innerHTML 一些问题分析

地址:http://www.17bianji.com/kaifa2/JS/28678.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)