转载:http://www.jb51.net/article/16585.htm
1、功能讲解:
innerHTML 设置或获取位于对象起始和结束标签内的 HTML
outerHTML 设置或获取对象及其内容的 HTML 形式
innerText 设置或获取位于对象起始和结束标签内的文本
outerText 设置(包括标签)或获取(不包括标签)对象的文本
<html> <head> <title>Demo</title> <style><!-- body {font-family:"宋体";color="blue";font-size="9pt"} --> </style> <script language="JavaScript"> //.innerHTML function innerHTMLDemo() { test_id1.innerHTML="<i><u>设置或获取位于对象起始和结束标签内的 HTML.</u></i>"; } //.innerText function innerTextDemo() { test_id2.innerText="<i><u>设置或获取位于对象起始和结束标签内的文本.</u></i>"; } //.outerHTML function outerHTMLDemo() { test_id3.outerHTML="<i><u>设置或获取对象及其内容的 HTML 形式.</u></i>"; } //.outerText function outerTextDemo() { test_id4.outerText="<i><u>设置(包括标签)或获取(不包括标签)对象的文本.</u></i>"; } </script> </head> <body> <ul> <li id="test_id1" onclick="innerHTMLDemo()">innerHTML效果.</li> <li id="test_id2" onclick="innerTextDemo()">innerText效果.</li> <li id="test_id3" onclick="outerHTMLDemo()">outerHTML效果.</li> <li id="test_id4" onclick="outerTextDemo()">outerText效果.</li> </ul> </body> </html>
3、不同之处:
简单的说innerHTML和outerHTML、innerText与outerText的不同之处在于:
1)、innerHTML与outerHTML在设置对象的内容时包含的HTML会被解析,而innerText与outerText则不会。
2)、在设置时,innerHTML与innerText仅设置标签内的文本,而outerHTML与outerText设置包括标签在内的文本。
特别说明:
innerHTML是符合W3C标准的属性,而innerText只适用于IE浏览器,因此,尽可能地去使用innerHTML,而少用innerText,如果要输出不含HTML标签的内容,可以使用innerHTML取得包含HTML标签的内容后,再用正则表达式去除HTML标签,下面是一个简单的符合W3C标准的示例:
<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">无HTML,符合W3C标准</a>
相关推荐
html js innerHTML outerHTML innerText outerText 等的区别及实例汇总
innerHTML、outerHTML、innerText、outerText的用法与区别.doc
本篇主要是对innerHTML,outerHTML,innerText,outerText的用法及区别进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助
document对象中有innerHTML、innerText这两个属性,都是获取document对象文本内容,但使用起来还是有区别的; 1) innerHTML设置或获取标签所包含的HTML+文本信息(从标签起始位置到终止位置全部内容,包括HTML标签,...
innerText属性和outerText属性在读取元素节点的文本内容时,得到的值是不一样的。它们的不同之处在于设置一个节点的文本属性时,outerText属性会使得原来的元素节点被文本节点替换掉。注意,innerText是非标准属性,...
<a>innerHTML,innerText,outerHTML,outeterText <input type =button onclick =inner() value=inner /> <input type =button onclick =outer() value=outer /> js源码如下: function...
我们常常需要使用另外一些对象的属性来实现动态改变其中的文本,它们就是:innerText,outerText,innerHTML,outerHTML,千万要注意它们的大小写,因为错一点您就得不到预期的效果了。
innerText(IE)、textContent(FF)、innerHTML 26 outerText、outerHTML(少用) 26 value属性获取表单节点内容 26 (3) 访问节点的样式 27 使用节点对象的style属性对象改变样式 27 使用className设置...
非常小巧实用的网页解析类,在delphi 10.2下编译通过,主要方法:getElementByid getElementsByTagName(aTag : string) getElementByTagNameAndFlag getElementsByClassName 标签主要属性:innerText , innerHTML ...
学习笔记Web知识说明深入JavaScript知识水平了解概念懂得使用实例输出总结亲自实现HTTP缓存 https状态码200201创建的206、300304不是Mo,400、500 HTTPS 网络路径参考协议相对网址HTML DOM操作innerHtml,outerHtml...
Most users will only want to use the innerText/innerHTML and outerText/outerHTML properties and methods discussed previously. However, there is some more advanced text ...
第 1 章 JavaScript 是什么...............................................1 3 1.1 历史简述..............................................1 1.2 JavaScript 实现................................................
//元素_取innerText,m_WebView为0将返回空。 el_GetouterText //元素_取outerText,m_WebView为0将返回空。 el_GetclassName //元素_取className,m_WebView为0将返回空。 el_GetouterHTML //元素_取outerHTML,m_...
//元素_取innerText,m_WebView为0将返回空。 el_GetouterText //元素_取outerText,m_WebView为0将返回空。 el_GetclassName //元素_取className,m_WebView为0将返回空。 el_GetouterHTML //元素_取outerHTML,m_...