zoukankan      html  css  js  c++  java
  • 全栈JavaScript之路(十九)HTML5 插入 html标记 ( 一 )innerHTML 与outerHTML

    在须要给文档插入大量的html 标记下。通过DOM操作非常麻烦,你不仅要创建一系列的节点,并且还要小心地依照顺序把它们接结起来。


    利用html 标签 插入技术,能够直接插入html代码字符串,简单、高效!


    下面插入html标签相关的扩展已经纳入html5 规范.

    • 1.innerHTML 属性
    • 2.outerHTML 属性
    • 3.insertAdjacentHTML 方法


    innerHTML 属性 有两种模式。写模式与读模式。

                   

         在读模式下,返回的是html 代码字符串。

    比如:

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

    对于上面的 div 来说 读模式返回的是下面html代码字符串

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

    这里要注意。不同的浏览器返回文档格式不同!   IE 与 Opear 返回的 html元素标签 都是大写的。而 火狐,chrome, safari,等 原原本本的返回。

    不要指望全部的浏览器都返回同样的子符串!


    在写模式下。innerHTML属性的值 会被解析为DOM子树,替换调用元素的全部子节点。


    假设是不包括html元素标签的纯文档,那么结果就是设置纯文本,比如:

    div.innerHTML = "hello";


    假设 字符串包括 html标签,比如

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

    以上写模式操作的结果例如以下:

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

     设置了innerHTML 之后。能够像訪问文档中的其它节点一样訪问新创建的节点。


    为innerHTML 设置HTML 字符串后,浏览器会将这个字符串解析为对应的DOM树。因此设置了innerHTML 之后,再从中读取HTML 字符串,会得到与设置时不一
    样的结果。

    原因在于返回的字符串是依据原始HTML 字符串创建的DOM树经过序列化之后的结果。


    使用innerHTML属性也有一些限制:

    插入<script> 标签,IE8及曾经的版本号,是唯一能执行里面脚本的浏览器,且必须满足一定条件!

    • 一是必须为<script>元素指定defer 属性
    • 二是<script>元素必须位于(微软所谓的)“有作用域的元素”(scoped element)之后。


    大多数浏览器都支持以直观的方式通过innerHTML 插入<style>元素。

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

    但在IE8 以及更早的版本号中:

    div.innerHTML = "_<style type="text/css">body {background-color: red; }</style>"; //<script>,<style> 在IE中属于 "无作用域"的元素,也就是不显示的元素。

    div.removeChild(div.firstChild);


    并非全部的html元素都支持 innerHTML属性: 

    不支持innerHTML的元素有: <col>,<colgroup>,<frameset>,<head>,<html>,<style>,<table>,<tbody>,<thead>,<tfoot>,<tr>

    此外。IE8以及更早IE版本号。<title> 也没有innerHTML属性。



    outerHTML 与  innerHTML 的不同点:  在读模式下,outerHTML 返回调用它的元素及全部子节点的HTML 标签。

    在写模式下,outerHTML
    会依据指定的HTML 字符串创建新的DOM 子树。然后用这个DOM子树全然替换调用元素。(而不不过调用元素的DOM子树)


  • 相关阅读:
    Calling a parent window function from an iframe
    JSON with Java
    Posting array of JSON objects to MVC3 action method via jQuery ajax
    What's the difference between jquery.js and jquery.min.js?
    jquery loop on Json data using $.each
    jquery ui tabs详解(中文)
    DataTables warning requested unknown parameter
    Datatables 1.10.x在命名上与1.9.x
    jQuery 1.x and 2.x , which is better?
    DataTabless Add rows
  • 原文地址:https://www.cnblogs.com/gcczhongduan/p/6684410.html
Copyright © 2011-2022 走看看