在须要给文档插入大量的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子树）

全栈JavaScript之路（十九）HTML5 插入 html标记 （ 一 ）innerHTML 与outerHTML的更多相关文章

  1. “全栈2019”Java第九十九章：局部内部类与继承详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  2. “全栈2019”Java第二十九章：数组详解（中篇）

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  3. “全栈2019”Java第十九章：关系运算符、条件运算符和三元运算符

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  4. 全栈JavaScript之路（十八）HTML5 自己定义数据属性

    HTML5 规范规定,用户能够为元素 自己定义非标准属性, 可是要加入 data- 前缀. 目的是为元素提供与页面渲染无关的信息.或者语义信息.这些属性名能够任意加入,仅仅要带上前缀 data- 开头 ...

  5. 全栈JavaScript之路（十六）HTML5 HTMLDocument 类型的变化

    HTML5 扩展了 HTMLDocument, 添加了新的功能. 1.document.readState = 'loading' || 'complete'  //支持readyState 属性的浏 ...

  6. 全栈JavaScript之路（ 二十 ）HTML5 插入 html标记 （ 二 ）insertAdjacentHTML

    insertAdjacentHTML(),  这种方法也是在IE中最早出现的.如今已纳入html5规范,它接受两个參数,一个是下列的标记之中的一个,一个是要写入的 html 代码文本. beforeb ...

  7. 全栈JavaScript之路（十四）HTML5 中与class属性相关的扩充

    1. getElementByClassName() :支持getElementsByClassName()方法的浏览器有IE 9+.Firefox 3+.Safari 3.1+.Chrome 和 O ...

  8. 全栈JavaScript之路（十七）HTML5 新增字符集属性

    HTML5 添加�了几个文档字符集属性. document.charset : 表示文档的实际使用的字符集. document.defaultCharset: 表示默认的字符集,跟浏览器以及操作系统设 ...

  9. 全栈JavaScript之路（ 二十二 ）IE 专有扩展——文档模式

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/hatmore/article/details/37611911 ie8 引入了一个新的概念.&quo ...

随机推荐

  1. 004.Ceph块设备基础使用

    一 基础准备 参考<002.Ceph安装部署>文档部署一个基础集群: 新增节点主机名及IP在deploy节点添加解析: [root@deploy ~]# echo "172.24 ...

  2. ThreadPoolExecutor 入参 corePoolSize 和 maximumPoolSize 的联系

    前言 我们可以通过 java.util.concurrent.ThreadPoolExecutor 来创建一个线程池: new ThreadPoolExecutor(corePoolSize, max ...

  3. WCF、WebAPI、WCFREST、WebService、WPF之间的区别

    在.net平台下,有大量的技术让你创建一个HTTP服务,像Web Service,WCF,现在又出了Web API.在.net平台下,你有很多的选择来构建一个HTTP Services.我分享一下我对 ...

  4. [OC] 使用 cocoaPods 导入 AFNetworking

    AFNetworking的GitHub地址: https://github.com/AFNetworking/AFNetworking 假设我们建立了一个叫做AFNWlearning的工程. 1.打开 ...

  5. Javascript你必须要知道的面试题

    1.使用 typeof bar === "object" 判断 bar 是不是一个对象有神马潜在的弊端?如何避免这种弊端? 使用 typeof 的弊端是显而易见的(这种弊端同使用 ...

  6. JAG Practice Contest for ACM-ICPC Asia Regional 2016.K.Non-redundant Drive(点分治)

    Atcoder vjudge 这标题好长... \(Description\) 给定一棵\(n\)个点的树.在每个点\(i\)你可以补充\(g_i\)的油量,经过一条边需要花费边长的油量.你可以选择从 ...

  7. git 命令的使用

    hello git 穿越时空 修改一条数据 git status 查看是否修改 git diff file1 如何修改的 git add file1 git commit -m "提交的信息 ...

  8. BZOJ2808 : 那些年我们画格子

    若$\min(n,m)=1$,那么设$f[i][j][k]$表示考虑前$i$个格子,改变了$j$次颜色,$i$的颜色为$k$的方案数,直接转移即可. 否则$\min(n,m)\geq 2$,那么有解当 ...

  9. C++程序设计方法2：函数运算符重载

    函数运算符()重载 函数运算符()也能重载,它使得对象看上去像是一个函数名 ReturnType operator() (Parameters) { ...... } ClassName Obj; O ...

  10. 超级牛皮的oracle的分析函数over(Partition by...) 及开窗函数 (转)

    http://zonghl8006.blog.163.com/blog/static/4528311520083995931317/ over(Partition by...) 一个超级牛皮的ORAC ...