Js-003-javascript the three-innertext and InnerHTML differences of common web elements

Last Update:2015-07-14 Source: Internet

Author: User

Tags set background

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

This article mainly describes the difference between using InnerText and InnerHTML to get the intermediate value of an element, and I personally understand the difference between the two as follows:

Webelement.innertext: Gets the text that is displayed by the page element
Webelement.innerhtml: Gets the HTML source in the middle of the element

Gossip less, and this is the code. Please refer to the small master, if there are deficiencies, please the great God, greatly appreciated!

The corresponding HTML page source code is as follows:

1 <HTML>2     <Head>3         <MetaCharSet= ' Utf-8 '>4 5         <title>javascript-Common element operations</title>6         <Scripttype= "Text/javascript"src= "Common.js"></Script>7         <Scripttype= "Text/javascript"src= "Test.js"></Script>8 9         <Linkrel= "stylesheet"type= "Text/css"href= "Global.css">Ten     </Head> One          A     <Body> -         <DivID= "Jscss"> -             <h4>The difference between InnerText and InnerHTML</h4> the             <ul> -                 <Li>1. Change the style syntax of HTML elements: document.getElementById (ID). style.property=new style</Li> -                 <Li>2, change the font color: document.getElementById (' id1 '). style.color= ' Red '</Li> -                 <Li>3. Add attribute: Btn.children[5].setattribute ("Class", "A_class"), class cannot be added with the first method</Li> +                 <Li>4. Get&lt;button&gt;Value in the middle of the label: Button.innertext</Li> -                 <Li>5. Get&lt;button&gt;Value of the label: Button.value</Li> +                 <BR> A                 <Li>Webelement.innerhtml gets the HTML source for the middle of the element</Li> at                 <Li>Webelement.innertext gets the text that is displayed for the page element</Li> -             </ul> -             <inputID= "MS"type= "text"> -             <inputID= "P2"type= "button"value= "Modify Font Color-1"onclick= "Modcss ()"> -             <ButtonID= "Id1"type= "button"onclick= "document.getElementById (' Id1 '). style.color= ' Red '">Modify Font Color-2</Button> -  in             <ButtonID= "CSSM"type= "button"onclick= "CSSM ()"value= "button style Modified value"><a>Style modification</a></Button> -         </Div> to              +         <Div> -             <BR><BR><BR><BR> the             <ahref= "Http://www.w3school.com.cn/jsref/dom_obj_style.asp"Target= "_blank">HTML DOM Style Object</a> *         </Div> $     </Body>Panax Notoginseng </HTML>

The above page source code is involved in the MODCSS () function source code is as follows:

1 function modcss () {2     document.getElementById ("P2"). style.color= "Blue"; 3 }

The above page source code is involved in the CSSM () function source code is as follows:

1 functionCSSM () {2     varinput = document.getElementById ("MS");3     //text box Assignment value4Input.value = "text box assignment";5 6     //Modify the font color in a text box7Input.style.color = "Red";8     9     //Set Background colorTenInput.style.backgroundColor = "Gray"; One      A     //Modify text box border size, color -Input.style.border = "4px solid blue"; -  the     //to modify the alignment of a text box -input.style.textAlign = "Center"; -  -Alert ("Input.value:" + document.getElementById ("MS"). Value + "\ n" + +           //both Firefox and Chrome support getting the value of button -"Button.value:" + document.getElementById ("CSSM"). Value + "\ n" + +           //Firefox and Chrome support getting button InnerHTML A"Button.innerhtml:" + document.getElementById ("CSSM"). InnerHTML + "\ n" + at           //Firefox does not support Innerttext's InnerText access, Chrome supports -"Button.innertext:" + document.getElementById ("CSSM"). InnerText); -}

Click the Style Modifier button to pop up the information shown below, from which you can clearly see the difference between InnerText and InnerHTML.

Where the HTML 26th, 27 Row Modify button Modify the font color-1 and Modify the font Color-2 of the JS script is consistent, the main difference is the way to implement style modification: one is called function, One is to write the function directly above the corresponding property (this can be written when the function is implemented very simply, and the more complex JS script is not recommended).

At this point, js-003-javascript operation Common web elements of three-innertext and InnerHTML the difference between the smooth end, I hope this article can give beginners JavaScript you a reference.

Finally, very grateful to the pro-stop, I hope this article can be pro helpful. Warmly welcome the kiss to discuss together and progress together. Thank you so much! ^_^

Js-003-javascript the three-innertext and InnerHTML differences of common web elements

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