Full stack JavaScript road (19) HTML5 Inserting HTML tags (i) InnerHTML and outerhtml

You need to insert a large number of HTML tags into the document. The DOM operation is cumbersome, and you will not only create a series of nodes, but also carefully link them in order.

With HTML tag insertion technology, you can insert HTML code strings directly, simple and efficient!

The following insert HTML tag related extensions have been incorporated into the HTML5 specification.

• 1.innerHTML Properties
• 2.outerHTML Properties
• 3.insertAdjacentHTML method

There are two modes of the InnerHTML property. Write mode and read mode.

In read mode, the HTML code string is returned.

Like what:

<div id= "outer" >    <p>this is a <strong>paragraph</strong> with a list following it.</p >    <ul>        <li>item 1</li>        <li>item 2</li>        <li>item 3</li >     </ul></div>

For the above Div, the Read mode returns the following HTML code string

<p>this is a <strong>paragraph</strong> with a list following it.</p>    <ul>        < Li>item 1</li>        <li>item 2</li>        <li>item 3</li>    </ul>

Be careful here.   Different browsers return document formats differently! The HTML element tags returned by IE and Opear are uppercase. While Firefox, Chrome, Safari, and so on are returned.

Do not expect all browsers to return the same substring string!

In write mode. The value of the innerHTML property is parsed as a DOM subtree, replacing all child nodes of the calling element.

If it is a plain document that does not include HTML element tags, the result is to set plain text, such as:

div.innerhtml = "Hello";

Suppose the string includes HTML tags, such as

div.innerhtml = "Hello & Welcome, <b>\" Reader\ "!</b>";

The results of the above write mode operations are as follows:

<div id= "Content" >hello &amp; Welcome, <b>&quot;reader&quot;! </b></div>

After the innerHTML has been set. You can access the newly created node as you would any other node in the document.

After you set the HTML string for innerHTML, the browser parses the string into the corresponding DOM tree. Therefore, after setting the innerHTML, the HTML strings are then read from the settings.
The result of the sample.

The reason is that the returned string is the result of a serialized DOM tree created from the original HTML string.

There are some limitations to using the innerHTML property:

Insert <script> tag, IE8 and previous version number, is the only browser that can execute the script inside, and must meet certain conditions!

• First, you must specify the defer property for the <script> element
• The second is that the <script> element must be located (Microsoft so-called) "scoped elements" (scoped Element).

Most browsers support an intuitive way to insert <style> elements through innerHTML.

div.innerhtml = "<style type=\" Text/css\ ">body {background-color:red;} </style> ";

However, in the IE8 and earlier version numbers:

div.innerhtml = "_<style type=\" Text/css\ ">body {background-color:red;} </style> "; <script>,<style> is an "no-scope" element in IE, that is, an element that is not displayed.
Div.removechild (Div.firstchild);

Not all HTML elements support the innerHTML property:

Elements that do not support innerHTML are: <col>,<colgroup>,<frameset>,

In addition IE8 and earlier IE version numbers. <title> also has no innerhtml attribute.

outerHTML differs from InnerHTML: in read mode, outerHTML returns the HTML tags of the element that called it and all the child nodes.

In write mode, outerhtml
Creates a new DOM subtree based on the specified HTML string. Then use this DOM subtree to completely replace the calling element . (not just the DOM subtree of the calling element)

Full stack JavaScript road (19) HTML5 Inserting HTML tags (i) InnerHTML and outerhtml