The difference between innerhtml,innertext,outerhtml,outertext in JavaScript

Last Update:2017-09-02 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 ＞

At the beginning, innertext and outertext are only effectively defined and used in the Chrome browser.

The InnerHTML property Sets or returns the HTML between the start and end tags of a table row, including the label.

Look at the code

<!DOCTYPE HTML><HTMLLang= "en"><Head>    <MetaCharSet= "UTF-8">    <Metaname= "Viewport"content= "Width=device-width, initial-scale=1.0">    <Metahttp-equiv= "X-ua-compatible"content= "Ie=edge">    <title>Document</title></Head><Body>    <DivID= "Div1">This is a label div</Div>    <spanID= "Span1">This is a label span</span>    <DivID= "Div2">        <span>Div2 inside the Span1</span>        <span>Div2 inside the Span2</span>    </Div>    <Script>        varDiv1=document.getElementById ("Div1"). InnerHTML; varSpan1=document.getElementById ("Span1"). InnerHTML; varDiv2=document.getElementById ("Div2" ). InnerHTML;        Console.log (DIV1);        Console.log (SPAN1);    Console.log (DIV2); </Script></Body></HTML>

I've defined three tags and printed them with the console.

You can see that if the current label has only text, the innerHTML will only output text

If there is a child tag, then the child tags and the text inside the label will be output, which must be remembered

This time you can use the Replace method to remove the label

Get text content only

document.getElementById (' Div2 '). InnerHTML. Replace (/<.+?>/gim, "));

As above, the span tag is gone, leaving only the text content inside

Definition and usageInnerTextProperty sets or returns the HTML content between the start and end tags of a table row, excluding HTML tags. We look at the code

<Body>    <DivID= "Div1">This is a label div</Div>    <spanID= "Span1">This is a label span</span>    <DivID= "Div2">        <span>Div2 inside the Span1</span>        <span>Div2 inside the Span2</span>        <imgsrc=""alt="">    </Div>    <Script>        varDiv1=document.getElementById ("Div1"). InnerText; varSpan1=document.getElementById ("Span1"). InnerText; varDiv2=document.getElementById ("Div2" ). InnerText;        Console.log (DIV1);        Console.log (SPAN1);            Console.log (DIV2); </Script></Body>

Print out the results

From the results you can see that both the current label and the child label only output text content

Definition and usageouterhtmlSets or gets the HTML form of the object and its contents, that is, the label and the text content are all displayed we look at the code

<Body>    <DivID= "Div1">This is a label div</Div>    <spanID= "Span1">This is a label span</span>    <DivID= "Div2">        <span>Div2 inside the Span1</span>        <span>Div2 inside the Span2</span>        <imgsrc=""alt="">    </Div>    <Script>        varDiv1=document.getElementById ("Div1"). outerHTML; varSpan1=document.getElementById ("Span1"). outerHTML; varDiv2=document.getElementById ("Div2"). outerHTML;        Console.log (DIV1);        Console.log (SPAN1);    Console.log (DIV2); </Script></Body>

We look at the print results of the console

That's interesting.

outerHTML is to take the entire contents of the current tag, including the label itself, out.

Definition and usageoutertextSets or gets the HTML form of the object and its contents, that is, the label and text content are all displayed

Let's see the code.

<Body>    <DivID= "Div1">This is a label div</Div>    <spanID= "Span1">This is a label span</span>    <DivID= "Div2">Hello World<span>Div2 inside the Span1</span>        <span>Div2 inside the Span2</span>        <imgsrc=""alt="">    </Div>    <Script>        varDiv1=document.getElementById ("Div1"). outertext; varSpan1=document.getElementById ("Span1"). outertext; varDiv2=document.getElementById ("Div2" ). outertext;        Console.log (DIV1);        Console.log (SPAN1);    Console.log (DIV2); </Script></Body>

See the results of console printing

Obviously, Outertext is the content of the current label to the output, if there is a sub-label, also the contents of the tag is also output

Well, after such a comparison, we can draw a conclusion.

InnerHTML output the text content of the current label , and if there is a child tag inside the tag, the child label itself and the text content within the child tag are output

InnerText only the text content in the current label, if there are child tags inside the tag, then only the text content within the sub-tag is output

outerHTML Output the current label itself and the text content within the label , if there are child tags, then the child tag itself and the text content within the label will also output

Outertext only the text content in the current label, if there are child tags inside the tag, then only the text content within the sub-tag is output

So where is the difference between outertext and innertext? The same is the output of text content, these two properties are exactly the same when reading data, may be different when writing data?

Next time write the JQ html (), text (), Val () record time to update

The difference between innerhtml,innertext,outerhtml,outertext in JavaScript

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