innerHTML与innerText区别

document 对象中有innerHTML和innerText 两个属性, 这两个属性都是获取document对象的文本内容的,这两个属性间有哪些区别呢?通过几个例子来看一下。

示例1

[html] view plain copy

  1. <html>
  2. <head><title>innerHTML</title></head>
  3. <body>
  4. <p id="p1">hello world </p>
  5. <script>
  6. var content = document.getElementById("p1");
  7. alert(content.innerHTML);
  8. alert(content.innerText)
  9. </script>
  10. </body>
  11. </html>

通过IE浏览器打开,弹出内容为 "hello world" 和 "hello world"

通过 Firefox 浏览器打开,弹出内容为 "hello world" 和 "undefined"

通过 chrome 浏览器打开,弹出内容为 "hello world" 和 "hello world"

示例2

[html] view plain copy

  1. <html>
  2. <head><title>innerHTML</title></head>
  3. <body>
  4. <div id="d1"><p id="p1">hello world </p></div>
  5. <script>
  6. var content = document.getElementById("d1");
  7. alert(content.innerHTML);
  8. alert(content.innerText)
  9. </script>
  10. </body>
  11. </html>

通过IE浏览器打开,弹出内容为 和 通过 Firefox 浏览器打开,弹出内容为 和 通过 chrome 浏览器打开,弹出内容为 和

通过上面两个示例,可以看出:

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

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

同时,innerHTML 是所有浏览器都支持的,innerText
是IE浏览器和chrome 浏览器支持的,Firefox浏览器不支持。其实,innerHTML 是W3C 组织规定的属性;而innerText
属性是IE浏览器自己的属性,不过后来的浏览器部分实现这个属性罢了。

outerHTML

说到innerHTML,顺便说一下跟innerHTML相对的outerHTML属性。

继续看上面的代码,将alert(content.innerText) 修改为 alert(content.outerHTML)

通过浏览器可以看到弹出框为<p id="p1">hello world </p>

和 <divid="d1"><p id="p1">hello world</p></div>

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

总结说明

  innerHTML是符合W3C标准的属性,而innerText只适用于IE浏览器(现在也适应chrome浏览器),因此,尽可能地去使用

innerHTML,而少用innerText,如果要输出不含HTML标签的内容,可以使用innerHTML取得包含HTML标签的内容后,再用正则表达式去除HTML标签,下面是一个简单的符合W3C标准的示例:

[html] view plain copy

  1. <html>
  2. <head><title>innerHTML</title></head>
  3. <body>
  4. <div id="d1"><p id="p1">hello world </p></div>
  5. <script>
  6. var content = document.getElementById("p1");
  7. alert(content.innerHTML.replace(/& lt;.+?>/gim,‘‘));
  8. </script>
  9. </body>
  10. </html>

弹出的为去掉了html标签之后的内容,这是个在所有浏览器均可使用的方法。

时间: 2024-11-03 04:30:52

innerHTML与innerText区别的相关文章

JS中innerHTML 和innerText和value的区别

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

(转)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;//

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

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的区别

共同点:innerHTML和innerText都会把元素内内容替换掉.不同点:1,innerHTML: 也就是从对象的起始位置到终止位置的全部内容,包括Html标签. 上例中的test.innerHTML的值也就是"<span style="color:red">test1</span> test2 ". 2,innerText: 从起始位置到终止位置的内容, 但它去除Html标签 上例中的text.innerTest的值也就是"t

innerHTML和innerText

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

(转)JS中innerHTML,innerText,value

原文:http://holysonll.blog.163.com/blog/static/21413909320134111054352/ JS中innerHTML,innerText,value 2013-05-11 11:24:49|  分类: JS与JQ |  标签:.innerhtml  .value  innertext   |举报 |字号大中小 订阅 一·.JS初学者易混淆的问题:innerHTML,innerText,value(他们和JQ的区别:JS→value,JQ→value