关于innerHTML 和innerText,outerHTML的区别(转)

用法:

1  <div id="test">
2     <span style="color:red">test1</span> test2
3  </div>

在JS中可以使用:

test.innerHTML:

  也就是从对象的起始位置到终止位置的全部内容,包括Html标签。

  上例中的test.innerHTML的值也就是“<span style="color:red">test1</span> test2 ”。

test.innerText:

  从起始位置到终止位置的内容, 但它去除Html标签

  上例中的text.innerTest的值也就是“test1 test2”, 其中span标签去除了。

test.outerHTML:

  除了包含innerHTML的全部内容外, 还包含对象标签本身。

  上例中的text.outerHTML的值也就是<div id="test"><span style="color:red">test1</span> test2</div>


完整示例:

1 <div id="test">
2    <span style="color:red">test1</span> test2
3 </div>
4
5 <a href="javascript:alert(test.innerHTML)">innerHTML内容</a>
6 <a href="javascript:alert(test.innerText)">inerHTML内容</a>
7 <a href="javascript:alert(test.outerHTML)">outerHTML内容</a>

特别说明:

  innerHTML是符合W3C标准的属性,而innerText只适用于IE浏览器,因此,尽可能地去使用innerHTML,而少用innerText,如果要输出不含HTML标签的内容,可以使用innerHTML取得包含HTML标签的内容后,再用正则表达式去除HTML标签,下面是一个简单的符合W3C标准的示例:

<a href="javascript:alert(document.getElementById(‘test‘).innerHTML.replace(/<.+?>/gim,‘‘))">无HTML,符合W3C标准</a>

-------------------------------------------------------------------------------------------------------------------------------

 1 <html>
 2 <head></head>
 3 <frameset frameborder="yes" frameborder="1" rows="40%,*">
 4 <frame name="top" src="1.html">
 5 <frame name="bottom" src="2.html">
 6 </frameset>
 7 </html>
 8
 9 <html>
10 <head>
11 <script language="javascript">
12 function init()
13 {
14     var aaa = parent.window.frames[0].document.body.innerHTML;
15     alert(aaa);
16 }
17 </script>
18 </head>
19 <body>
20 <p align="center">nothing</p>
21 <p align="center"><input type="button" onclick="init()"; value="click"></p>
22 </body>
23 </html>
24
25 <html>
26 <center>汽车 房产 女人</center>
27 </html>

来源:http://www.phpweblog.net/kiyone/archive/2007/05/17/1206.html 感谢作者分享

时间: 2024-08-29 07:31:37

关于innerHTML 和innerText,outerHTML的区别(转)的相关文章

(转)innerHTML、innerText和outerHTML、outerText的区别

原文:http://walsh.iteye.com/blog/261966 innerHTML.innerText和outerHTML.outerText的区别          博客分类: CSS/HTML HTML 1.区别描述如下: innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML 设置或获取对象及其内容的 HTML 形式 innerText 设置或获取位于对象起始和结束标签内的文本 outerText 设置(包括标签)或获取(不包括标签)对象的文本

innerHTML&amp;innerHTML与innerText的区别&amp;outerHTML&amp;innerHTML与html的区别

innerHTML innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML. 语法:HTMLElementObject.innerHTML=text 所有主要浏览器都支持 innerHTML 属性 innerHTML在JS是双向功能:获取对象的内容或向对象插入内容: innerHTML 属性用于设置或返回指定标签之间的 HTML 内容. 语法 Object.innerHTML = "HTML";// 设置 var html = Object.innerHTML;//

DOM中的outerHTML,innerHTML,outerText,innerText的区别

--转自http://blog.163.com/yw_0721/blog/static/7164579720102932157759/ 简单的说innerHTML和outerHTML.innerText与outerText的不同之处在于: 1).innerHTML与outerHTML在设置对象的内容时包含的HTML会被解析,而innerText与outerText则不会. 2).在设置时,innerHTML与innerText仅设置标签内的文本,而outerHTML与outerText设置包括标

innerHTML与innerText区别

document 对象中有innerHTML和innerText 两个属性, 这两个属性都是获取document对象的文本内容的,这两个属性间有哪些区别呢?通过几个例子来看一下. 示例1 [html] view plain copy <html> <head><title>innerHTML</title></head> <body> <p id="p1">hello world </p>

js中的innerHTML、innerText、outerHTML的内容代码详解

我还是喜欢看代码,看吧…… <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>innerHTML innerText outerHTML的练习</title> <style> div{ margin:20px auto; width:200px; height:200px; background

innerHTML 和 innertext 以及 outerHTML

今天在制作firefox下支持复制的js代码的时候,用到了innerText,测试发现原来firefox支持innerHTML但不支持innerText. test.innerHTML: 也就是从对象的起始位置到终止位置的全部内容,包括Html标签. 上例中的test.innerHTML的值也就是“<span style="color:red">test1</span> test2 ”. test.innerText: 从起始位置到终止位置的内容, 但它去除Ht

JS中innerHTML 和innerText和value的区别

(1)innerHTML 和innerText和value的区别: innerHTML innerText是对非表单元素进行操作的. value是对表单元素进行操作的. (2)innerHTML 和innerText的区别 当innerHTML赋值时,能对内容里面的标记元素(<h1></h1>)进行处理,展现出效果 .一般多运用于赋值 当innerHTML 取值时,输出的结果也含有标记元素 当innerText赋值时,输入什么内容就显示什么内容,不对标记元素进行处理. 当inner

innerHTML,innerText,outHTML,outText区别

<p><div id="div" style="background-color:#ff9966;border:1px #ff0000 dashed;"><span>这是一个层</span></div> <input name="innerHTML" value="innerHTML" type="button" OnClick="

js中的innerHTML,innerText,value的区别

首先先说一下 我自己认为的 innerHTML,innerText,value的区别 innerHTML 是在控件中加html代码 就是设置一个元素里面的HTML eg: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <

JavaScript中innerHTML与innerText,createTextNode的区别

innerHTML和innerText 它们都会把元素内内容替换掉,区别在于: innerHTML 会把替换内容里的 HTML 标记解释执行. innerText 会把替换内容里的 HTML 标记原样输出而不执行. 例如有如下代码: var content = "<b>这是对innerHTML和innerText的测试</b>" ; // 假设 e 为网页内某元素 e.innerHTML = content ; // 显示结果为 这是对innerHTML和inn