innerHTML、innerText和outerHTML、outerText的区别

1、区别描述如下：

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

innerText和outerText在获取时是相同效果，但在设置时，innerText仅设置标签内的文本，而outerText设置包括标签在内的文本。

2、示例代码

Html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>innerHTML、outerHTML和innerText、outerHTML的区别</title>  <script language="JavaScript" type="text/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="<font size=9pt color=red><i><u>设置或获取对象及其内容的 HTML 形式.</u></i></font>";   }  //.outerText  function outerTextDemo()  {   test_id4.outerText="<br></br><i><u>设置(包括标签)或获取(不包括标签)对象的文本.</u></i>";   }  </script>   </head>   <body>   <ul>   <li id="test_id1" οnclick="innerHTMLDemo()">innerHTML效果.</li>   <li id="test_id2" οnclick="innerTextDemo()">innerText效果.</li>   <li id="test_id3" οnclick="outerHTMLDemo()">outerHTML效果.</li>   <li id="test_id4" οnclick="outerTextDemo()">outerText效果.</li>   </ul>   </body>   </html>

3、不同之处:　

简单的说innerHTML和outerHTML、innerText与outerText的不同之处在于：
　　1）、innerHTML与outerHTML在设置对象的内容时包含的HTML会被解析，而innerText与outerText则不会。
　　2)、在设置时，innerHTML与innerText仅设置标签内的文本，而outerHTML与outerText设置包括标签在内的文本。
对于一个id为"testdiv"的div来说，outerHTML、innerHTML以及innerTEXT三者的区别可以通过下图展示出来：

innerHTML、innerText和outerHTML、outerText的区别相关推荐

JS中innerHTML,innerText,outHTML的用法及区别
一张图解释: 对于一个id为"testdiv"的div来说,outerHTML.innerHTML以及innerTEXT三者的区别可以通过下图展示出来: 文字解释: innerHT ...
innerHTML、innerText、outerHTML、outerText区别
1.区别: (1) innerHTML 设置或获取位于对象起始和结束标签内的 HTML,例子: <div id="div1">hello world</div&g ...
InnerHTML、InnerText、outerHTML、outerText的区别
innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML设置或获取标签及标签内的HTML innerText 设置或获取位于对象起始和结束标签内的文本 outerTex ...
InnerHTML、InnerText、outerHTML的用法与区别
InnerHTML.InnerText.outerHTML的用法与区别 InnerHTML获取或设置指定元素标记内的HTML内容,从元素标记的开始到元素标记的结束 InnerText获取或设置指定元素 ...
JS中的innerHTML，innerText，outerHTML的区别
一, 直接看demo <body><div id="test"><p>第一个</p></div><script t ...
html页面的text用法,js中innerHTML，innerText，outerHTML用法总结
如何获取DIV里面的内容,在js中为大家提供了三种方法,分别是outerHTML.innerHTML和innerText,这里要注意大小写!看起来长得很像,那么到底怎么使用以及它们之间有什么区别,我想 ...
[js] innerHTML与outerHTML有什么区别？
[js] innerHTML与outerHTML有什么区别? <div id="test"><h5>就是喜欢你</h5></div> ...
java中outer和inner_innerText 和outerText 的区别
A test for innerText, outerText method Hello, Hellin Zhang 请您先下载运行并参考作者写的例子. Hello, Hellin Zhang out ...
innerHTML,innerText是什么意思?怎么使用？
innerHTML,innerText是什么意思?怎么使用? innerHTML:获取标签的内容(包括子元素),字符 innerText:获取标签的文字内容,字符一.属性的操作需要获取的属性 in ...

innerHTML、innerText和outerHTML、outerText的区别

innerHTML、innerText和outerHTML、outerText的区别相关推荐

最新文章

热门文章