The difference between JavaScript InnerHTML, outerHTML, InnerText, outertext

Last Update:2016-11-08 Source: Internet

Author: User

Tags html form

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

1, function Explanation:
InnerHTML Sets or gets the HTML that is located within the start and end tags of the object
outerHTML Sets or gets the HTML form of an object and its contents
InnerText settings (including labels) or get (excluding labels) text that is within the start and end tags of an object
Outertext set (including tags) or get (excluding tags) the text of an object

2. Example

123<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>4<title> Demo </title>5<script language = "JavaScript" >6     functionInnerhtmldemo () {7Alert (document.getElementById (' Test_id1 '). InnerHTML);8<!--<span>innerhtml effect .</span>--9test_id1.innerhtml = "<i><u> set or get html.</u></i> located within the start and end tags of the object";Ten<!--innerHTML means that all the contents of the current tag (including the other HTML tags included in the content), and then replace all of them. One<!--The browser will interpret the included HTML tags- AAlert (document.getElementById (' Test_id1 '). InnerHTML); -<!--<li id= "test_id1" onclick= "Innerhtmldemo ()" ><i><u> set or Get html.</u>< in object start and end tags /i></li>-- -     } the     functionInnertextdemo () { -Alert (document.getElementById (' Test_id2 '). InnerText); -<!--innerHTML effect. - -Test_id2.innertext = "<i><u> settings (including labels) or get (excluding labels) text that is within the start and end tags of the object .</u></i>"; +<!--innertext means that all the text content in the current tag (there are other HTML tags in the content that does not contain the tag), but replace it with the HTML tag-- -<!--browser does not interpret the included HTML tags- +Alert (document.getElementById (' Test_id2 '). InnerText); A<!--<li id= "Test_id2" onclick= "Innertextdemo ()" >&lt;i&gt;&lt;u&gt; Sets or gets the text that is inside the start and end tags of the object. &lt;/u&gt;&lt;/i&gt;</li> at     } -     functionOuterhtmldemo () { -Alert (document.getElementById (' Test_id3 '). outerhtml); -<!--<li id = "TEST_ID3" onclick = "Outerhtmldemo ()" ><span>outerhtml effect .</span></li>- -test_id3.outerhtml = "<i><u> Sets or gets the HTML form of the object and its contents .</u></i>"; -<!--outerhtml means that it is the current tag, and all of its contents (including the other HTML tags included in the contents of the tag), and replace it with all- in<!--The browser will interpret the included HTML tags- -Alert (document.getElementById (' Test_id3 '). outerhtml); to<!--<i><u> Sets or gets the HTML form of the object and its contents .</u></i> +     } -     functionOutertextdemo () { theAlert (document.getElementById (' Test_id4 '). outertext); *<!--outertext effect. - $Test_id4.outertext = "<i><u> set (including tags) or get (excluding tags) the text of the object .</u></i>";Panax NotoginsengAlert (document.getElementById (' Test_id4 '). outertext); -<!--outertext means that it is the current tag, and all of its contents (including the other HTML tags included in the contents of the tag), and replace it with all- the<!--browser does not interpret the included HTML tags- +<!--&lt;i&gt;&lt;u&gt; settings (including labels) or get (excluding tags) the text of an object .&lt;/u&gt;&lt;/i&gt; - A     } the</script> + -<body> $<ul> $<li id = "TEST_ID1" onclick = "Innerhtmldemo ()" ><span>innerhtml effect .</span></li> -<li id = "Test_id2" onclick = "Innertextdemo ()" ><span>innertext effect .</span></li> -<li id = "TEST_ID3" onclick = "Outerhtmldemo ()" ><span>outerhtml effect .</span></li> the<li id = "Test_id4" onclick = "Outertextdemo ()" ><span>outertext effect .</span></li> -</ul>Wuyi</body> the
3, the difference:
The difference between innerHTML and outerHTML, innertext and Outertext is simply that:
1), innerHTML, and outerhtml the HTML that is included when setting the content of the object is parsed, and innertext and outertext do not.
2), when set, innerHTML and innertext only set the text within the label, while outerHTML and Outertext set the text including the label.

Special Note:
innerHTML is a standard-compliant attribute, and innertext only works with Internet Explorer, so use innerHTML as much as possible, and less innertext, if you want to output content that does not contain HTML tags, You can use innerHTML to get content that contains HTML tags, and then use regular expressions to remove the HTML tags, and here's a simple example of the standard:
<a href= "Javascript:alert (document.getElementById (' Test '). Innerhtml.replace (/<.+?>/gim, '))" > No HTML, Meet the Standards </a>
 Another example. 
 <div> 
 <span> content </span> 
 </div> 
 Use these to get the contents of the above Div, the difference is as follows: 
 InnerHTML: < Span> content </span>, with HTML tags 
 InnerText: Content without HTML tags 
 outerhtml: <div><span> content </span> </div> 
 Outertext: Gets the same element as Inntertext. 
 
 Use these to change the contents of an element 
 <div id= "test" ></DIV> 
 innerhtml= "<i> content </i>" 
//<div id= "Test" ><i> content </i></div> Show italic "content", I parsed 
 
 innertext= <i> content as an HTML tag </i > "
//<div id=" test "><i> content </i></div> Show content <i> content </i>, I did not parse as HTML tag, Instead, it outputs directly. 
 
 outerhtml= <i> content </i> 
//<i> content </i> replaces the outside label, and I is parsed to show an italic "content 
 
 outertext= <i> content </i> 
//Replace outside label, I not resolved, page display <i> content </i> 
 
 Note outerhtml, InnerText is not a standard, please note browser compatibility when using! 
 JavaScript InnerHTML, outerhtml, InnerText, outertext differences

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More