The usage and difference of innerHTML, outerhtml, InnerText and Outertext in JS

1, Function Description:

InnerHTML Sets or gets the HTML that is located within the start and end tags of the object

InnerText set or get text that is within the start and end tags of an object

outerHTML Sets or gets the HTML form of an object and its contents

Outertext set (including tags) or get (excluding tags) the text of an object

2. Example

The page has the following code:

<div id= "mydiv" >      <span style= "color:red" >span1</span> span2</div>

var InnerHTML = document.getElementById ("mydiv"). Innerhtml;var InnerText = document.getElementById ("Mydiv"). InnerText; Firefox does not support var outerhtml = document.getElementById ("mydiv"). Outerhtml;var outertext = document.getElementById (" Mydiv "). Outertext; Firefox does not support Console.info (InnerHTML);  Output <span style= "color:red" >span1</span> span2console.info (innerText);  Output Span1 span2console.info (outerhtml);  Output <div id= "mydiv" ><span style= "color:red" >span1</span>span2</div>console.info ( Outertext);  Output Span1 span2

ps:innerhtml is a standard-compliant attribute, and innertext is not supported for Firefox, so use innerHTML as much as possible ,

Instead of using innertext, if you want to output content that does not contain HTML tags, you can use innerHTML to get content that contains HTML tags.

Using regular expressions to remove HTML tags, here is a simple example of the standard:

Console.info (document.getElementById (' mydiv '). Innerhtml.replace (/<.+?>/gim, '));

View Demo: http://itmyhome.com/js_innerHTML_innerText_differences/

Itmyhome

The usage and difference of innerHTML, outerhtml, InnerText and Outertext in JS