Path to full-stack JavaScript (19th) html 5 insertion of html tags (1) innerHTML and outerHTML, html5outerhtml

Path to full-stack JavaScript (19th) html 5 insertion of html tags (1) innerHTML and outerHTML, html5outerhtml

It is difficult to use DOM operations to insert a large number of html tags to a document. You must not only create a series of nodes, but also carefully link them in order.

Using the html tag insertion technology, you can directly insert html code strings, which is simple and efficient!

The following html Tag-related extensions have been incorporated into the html5 specification.

• 1. innerHTML attributes
• 2. outerHTML attributes
• 3. insertAdjacentHTML Method

The innerHTML attribute has two modes: Write mode and read mode.

In Read mode, an html code string is returned.

For example:

<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>

Note that different browsers return different document formats! The html element tags returned by IE and Opear are in uppercase, while Firefox, chrome, safari, and other original returns.

Do not expect all browsers to return the same substring!

In write mode, the value of the innerHTML attribute is parsed as a DOM subtree, replacing all the subnodes of the calling element.

If the document does not contain html element tags, the result is to set plain text. For example:

div.innerHTML = "hello";

If the string contains html tags, for example

div.innerHTML = "Hello & welcome, <b>\"reader\"!</b>";

The result of the write mode operation is as follows:

<div id="content">Hello &amp; welcome, <b>&quot;reader&quot;!</b></div>

After innerHTML is set, you can access the newly created Node just like other nodes in the document.

After an HTML string is set for innerHTML, the browser parses the string into a corresponding DOM tree. Therefore, after innerHTML is set, the HTML string is read from it, which is different from the setting.
Sample results. The reason is that the returned string is serialized Based on the DOM tree created by the original HTML string.

There are also some restrictions on using the innerHTML attribute:

Insert the <script> label. IE8 and earlier versions are the only browsers that can run scripts in it and must meet certain conditions!

• First, the defer attribute must be specified for the <script> element.
• Second, the <script> element must be located after the scoped element.

Most browsers support innerHTML insertion of <style> elements in an intuitive way.

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

However, in IE8 and earlier versions:

Div. innerHTML = "_ <style type = \" text/css \ "> body {background-color: red ;}</style>"; // <script>, <style> an element in IE that is "unscoped", that is, an element that is not displayed. Div. removeChild (div. firstChild );

Not all html elements support the innerHTML attribute:

InnerHTML is not supported by the following elements: <col>, <colgroup>, <frameset>,

In addition, for IE8 and earlier IE versions, <title> does not have the innerHTML attribute.

Differences between outerHTML and innerHTML: In Read mode, outerHTML returns a callIts elementsAnd the HTML tags of all child nodes. In write mode, outerHTML
Creates a new DOM subtree Based on the specified HTML string.Completely Replace the call Element. (Instead of calling the DOM subtree of an element)

How to Use innerHTML? Insert a tag.

Define the id in your html Tag, such:
<Table>
<Tr>
<Td id = "content"> </td>
</Tr>
</Table>
Write content. innerHTML = "kkk" in javaScript, that is, insert the text kkk in the cell.
Of course, if only the inserted text can be innerText, and innerHTML can be inserted with html tags.
You can use innerHTML to dynamically generate html elements using js.

How to dynamically add html in a specific location using js? Besides innerHTML

AppendChild is used to add a node to another container node:
Var newElement = document. Document. createElement ('div ');
Var outerDiv = document. Document. getElementById ("outerDivId ");
OuterDiv. appendChild (newElement );