javascript innerHTML、outerHTML、innerText、outerText的区别

1、功能讲解: 
innerHTML 设置或获取位于对象起始和结束标签内的 HTML 
outerHTML 设置或获取对象及其内容的 HTML 形式 
innerText 设置(包括标签)或获取(不包括标签)位于对象起始和结束标签内的文本 
outerText 设置(包括标签)或获取(不包括标签)对象的文本

2、示例

 1 <html>
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 4 <title> Demo </title>
 5 <script language = "JavaScript">
 6     function innerHTMLDemo() {
 7         alert(document.getElementById(‘test_id1‘).innerHTML);
 8         <!-- <span>innerHTML效果.</span> -->
 9         test_id1.innerHTML = "<i><u>设置或获取位于对象起始和结束标签内的 HTML.</u></i>";
10         <!-- innerHTML表示是当前tag里面所有的内容(包含的内容中有其他的html标签那就也包含该标签),替换的时候就全部替换 -->
11         <!-- 浏览器会对包含的html标签进行解释 -->
12         alert(document.getElementById(‘test_id1‘).innerHTML);
13         <!-- <li id="test_id1" onclick="innerHTMLDemo()"><i><u>设置或获取位于对象起始和结束标签内的 HTML.</u></i></li> -->
14     }
15     function innerTextDemo() {
16         alert(document.getElementById(‘test_id2‘).innerText);
17         <!-- innerHTML效果. -->
18         test_id2.innerText = "<i><u>设置(包括标签)或获取(不包括标签)位于对象起始和结束标签内的文本.</u></i>";
19         <!-- innerText表示是当前tag里面所有的文本内容(包含的内容中有其他的html标签那就不包含该标签),但是替换的时候就替换包括html标签 -->
20         <!-- 浏览器不会对包含的html标签进行解释 -->
21         alert(document.getElementById(‘test_id2‘).innerText);
22         <!-- <li id="test_id2" onclick="innerTextDemo()">&lt;i&gt;&lt;u&gt;设置或获取位于对象起始和结束标签内的文本.&lt;/u&gt;&lt;/i&gt;</li> -->
23     }
24     function outerHTMLDemo() {
25         alert(document.getElementById(‘test_id3‘).outerHTML);
26         <!-- <li id = "test_id3" onclick = "outerHTMLDemo()"><span>outerHTML效果.</span></li> -->
27         test_id3.outerHTML = "<i><u>设置或获取对象及其内容的 HTML 形式.</u></i>";
28         <!-- outerHTML表示是当前tag,及其里面所有的内容(包含的内容中有其他的html标签那就也包含该标签),替换的时候就全部替换 -->
29         <!-- 浏览器会对包含的html标签进行解释 -->
30         alert(document.getElementById(‘test_id3‘).outerHTML);
31         <!-- <i><u>设置或获取对象及其内容的 HTML 形式.</u></i> -->
32     }
33     function outerTextDemo() {
34         alert(document.getElementById(‘test_id4‘).outerText);
35         <!-- outerText效果. -->
36         test_id4.outerText = "<i><u>设置(包括标签)或获取(不包括标签)对象的文本.</u></i>";
37         alert(document.getElementById(‘test_id4‘).outerText);
38         <!-- outerText表示是当前tag,及其里面所有的内容(包含的内容中有其他的html标签那就也包含该标签),替换的时候就全部替换 -->
39         <!-- 浏览器不会对包含的html标签进行解释 -->
40         <!-- &lt;i&gt;&lt;u&gt;设置(包括标签)或获取(不包括标签)对象的文本.&lt;/u&gt;&lt;/i&gt; -->
41     }
42 </script>
43 </head>
44 <body>
45     <ul>
46         <li id = "test_id1" onclick = "innerHTMLDemo()"><span>innerHTML效果.</span></li>
47         <li id = "test_id2" onclick = "innerTextDemo()"><span>innerText效果.</span></li>
48         <li id = "test_id3" onclick = "outerHTMLDemo()"><span>outerHTML效果.</span></li>
49         <li id = "test_id4" onclick = "outerTextDemo()"><span>outerText效果.</span></li>
50     </ul>
51 </body>
52 </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>


另外举个例子来说吧。<div>    <span>内容</span></div>使用这几个来获取上面div的内容的话,区别如下:innerHTML:     <span>内容</span>,带有html标签innerText:        内容 不带html标签outerHTML:     <div><span>内容</span></div>outerText:        获取元素跟innterText是一样的。

使用这几个来改变某个元素的内容<div id="test"></div>innerHTML="<i>内容</i>"//<div id="test"><i>内容</i></div>     展示出来的是斜体的“内容”,i作为html标签解析了

innerText="<i>内容</i>" //<div id="test"><i>内容</i></div>     展示的内容为“<i>内容</i>”,i没有作为html的标签解析,而是直接输出了。

outerHTML="<i>内容</i>"//<i>内容</i>                         就是替换了外面的标签,同时i会被解析,展现一个斜体的“内容”

outerText="<i>内容</i>" //替换外面的标签,i没有解析,页面显示“<i>内容</i>”

注意outerHTML、innerText不是W3C标准,使用时请注意浏览器兼容性
时间: 2024-10-10 11:30:23

javascript innerHTML、outerHTML、innerText、outerText的区别的相关文章

innerHTML,outerHTML,innerText,outerText区别以及insertAdjacentHTML()方法

在需要给文档插入大量的新的HTML标记的情况下,通过多次DOM操作先创建节点再指定它们之间的关系会非常麻烦而且效率不高,相对而言插入标记的方法会更加简单,速度也更快. 插入标记中有这四个属性innerHtml,outerHTML,innerText,outerText. 这四个属性都有获取状态和设置状态. 我们先来看一小段代码 <div><p>我是div的子元素</p></div> *在这里我们要先获取这个div,我用divnode代替.在chrome浏览器

innerHTML outerHTML innerText textContent的区别

在网上看了很多博文介绍他们之间的区别,大部分都说FF中innerText不能使用,但经过自己试验,是可以用的,所以自己把各种情况总结了一下. 首先是innerHTML,这个就不用多说了,返回的是标签内部所有的内容,包括标签和文本,还有空格 举两个栗子,对比一下空格导致的输出区别 <div id="main">1 <span>123</span> <p>222</p> <div class="test"

innerHTML/outerHTML; innerText/outerText; textContent

innerHTML v.s. outerHTML Element.innerHTML Reference: https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML Functionality Get serialized HTML code describing its descendants. Set : Remove all the children, parse the content string and as

(转)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 outHTML innerText outerText

innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML 设置或获取对象及其内容的 HTML 形式 innerText 设置或获取位于对象起始和结束标签内的文本 outerText 设置(如果对象为div,包括标签在内一块替换,相当于outerHTML)或获取(不包括标签,相当于innerText)对象的文本 innerHTML outHTML innerText outerText,布布扣,bubuko.com

innerHTML outerHTML innerText value 区别

定义 innerHTML: 属性设置或返回表格行的开始和结束标签之间的 HTML.(也就数说,用innerHTML的元素必须是标签对的形式,也就是input啥都输不出来) outerHTML: 设置或获取对象及其内容的 HTML 形式.(标签对,input输出本身) innerText: 设置或获取位于对象起始和结束标签内的文本.(标签对,input啥也输不出来) value 这个用的地方比较多,这里仅以input中的value为例.就是input的值.(标签对,输出undefined) 代码

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

1.功能讲解: innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML 设置或获取对象及其内容的 HTML 形式 innerText 设置或获取位于对象起始和结束标签内的文本 outerText 设置(包括标签)或获取(不包括标签)对象的文本 2.示例 <html> <head> <title>Demo</title> <style><!-- body {font-family:"宋体";

innerHTML、outerHTML、innerText、outerText的区别

1.功能讲解: innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML 设置或获取对象及其内容的 HTML 形式 innerText 设置或获取位于对象起始和结束标签内的文本 outerText 设置(包括标签)或获取(不包括标签)对象的文本 代码如下 <font size="3"><html> <head> <title>Demo</title> <style><!-- bo

【JavaScript】innerHTML、innerText和outerHTML的用法区别

用法: <div id="test">   <span style="color:red">test1</span> test2</div> 在JS中可以使用: test.innerHTML: 也就是从对象的起始位置到终止位置的全部内容,包括Html标签. 上例中的test.innerHTML的值也就是“<span style="color:red">test1</span>