innerText、innerHTML与outerHTML、outerText的区别 实例详解
1.x.innerHTML: 从对象的起始位置到终止位置的全部内容,包括Html标签。
2.x.innerText: 从对象的起始位置到终止位置的内容, 去除Html标签。
3.x.outerHTML: 除了包含innerHTML的全部内容外, 还包含对象标签本身。
看实例代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<BODY>
<div id="div">
<input name="button" value="Button" type="button">
<font color="green">
<h2>This is a DIV!</h2>
</font>
</div>
<input name="innerHTML" value="innerHTML" type="button" OnClick="alert(div.innerHTML);">
<input name="outerHTML" value="outerHTML" type="button" OnClick="alert(div.outerHTML);">
<input name="innerText" value="innerText" type="button" OnClick="alert(div.innerText);">
<input name="outerText" value="outerText" type="button" OnClick="alert(div.outerText);">
</BODY>
</HTML>
上例中 x.innerHTML 的值也就是“<span style=”color:red”>z1</span> z2 ”。
上例中 x.innerTest 的值也就是“z1 z2”, 其中span标签被去除了。
上例中 x.outerHTML 的值也就是<div id=”x”><span style=”color:red”>z1</span> z2</div> 。
特别说明:
innerHTML符合W3C标准,而innerText只适用于IE浏览器,因此,尽可能地去使用innerHTML,而少用innerText,如果要输出不含HTML标签的内容,可以使用innerHTML取得包含HTML标签的内容后,再用正则表达式去除HTML标签,下面是一个简单的符合W3C标准的示例:
<a href="javascript:alert(document.getElementById('x').innerHTML.replace(/<.+?>/gim,''))">无HTML标签,符合W3C标准</a>
- 大小: 5.4 KB
分享到:
相关推荐
html js innerHTML outerHTML innerText outerText 等的区别及实例汇总
innerHTML、outerHTML、innerText、outerText的用法与区别
本篇主要是对innerHTML,outerHTML,innerText,outerText的用法及区别进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助
主要介绍了javascript innerHTML、outerHTML、innerText、outerText的区别,本文讲解了它们的功能、使用实例、和不同之处,需要的朋友可以参考下
innerText属性和outerText属性在读取元素节点的文本内容时,得到的值是不一样的。它们的不同之处在于设置一个节点的文本属性时,outerText属性会使得原来的元素节点被文本节点替换掉。注意,innerText是非标准属性,...
我们常常需要使用另外一些对象的属性来实现动态改变其中的文本,它们就是:innerText,outerText,innerHTML,outerHTML,千万要注意它们的大小写,因为错一点您就得不到预期的效果了。
document对象中有innerHTML、innerText这两个属性,都是获取document对象文本内容,但使用起来还是有区别的; 1) innerHTML设置或获取标签所包含的HTML+文本信息(从标签起始位置到终止位置全部内容,包括HTML标签,...
<a>innerHTML,innerText,outerHTML,outeterText <input type =button onclick =inner() value=inner /> <input type =button onclick =outer() value=outer /> js源码如下: function...
非常小巧实用的网页解析类,在delphi 10.2下编译通过,主要方法:getElementByid getElementsByTagName(aTag : string) getElementByTagNameAndFlag getElementsByClassName 标签主要属性:innerText , innerHTML ...
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 ...
学习笔记Web知识说明深入JavaScript知识水平了解概念懂得使用实例输出总结亲自实现HTTP缓存 https状态码200201创建的206、300304不是Mo,400、500 HTTPS 网络路径参考协议相对网址HTML DOM操作innerHtml,outerHtml...
(2) 对象的定义与实例化 15 (3) 对象的作用域 16 JavaScript对象只有公用作用域 16 JavaScript对象没有静态作用域 16 关键字this 16 (4) 定义类或对象的方法 16 工厂方式 16 构造函数方式和原型方式 ...
//元素_取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_...
3.2.1 声明和实例化..............................................59 3.2.2 对象引用..............................................59 3.2.3 对象废除..............................................59 3.2.4 ...