Home > Developer > JavaScript
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 ()" ><i><u> Sets or gets the text that is inside the start and end tags of the object. </u></i></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- +<!--<i><u> settings (including labels) or get (excluding tags) the text of an object .</u></i> - 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> the3, 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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
