在须要给文档插入大量的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. Python 主、次（major，minor）版本号获取

    Python  主.次(major,minor)版本号获取 import sys sys.version_info sys.version_info.major sys.version_info.mi ...

  2. 1301 邻值查找（set 平衡树 | 链表）

    描述 给定一个长度为 n 的序列 A,A 中的数各不相同.对于 A 中的每一个数 A_i,求: min(1≤j<i) ⁡|A_i-A_j| 以及令上式取到最小值的 j(记为 P_i).若最小值点 ...

  3. 满血复活--来自世一大的WAR

    最需要复习的清单 1.二分 2.图论 3.数论 4.dp

  4. C++雾中风景13:volatile解惑

    笔者入职百度时,二面面试官的让我聊聊C++之中的volatile关键词.volatile在Java和C++之中的差别可谓是天差地别,我只是简单聊了聊Java之中的volatile,面试官对我的回答并不 ...

  5. 3-6 Vue中的条件渲染

    本次案例讲解:v-if,v-show,v-else,v-else-if和key值的相关用法!!! v-if指令: //通过一个(v-if)指令 ,可以结合js表达式的返回值,决定一个标签是否在页面上展 ...

  6. sql - 递归update

    declare v_rlt ):; l_sql ); -- variable that contains a query l_c sys_refcursor; -- cursor variable(w ...

  7. linux 学习笔记 APACHE安装总结

    #cd /usr/local #mkdir APACHE #tar zxvf /usr/etc/DEV/httpd-2.2.9.tar.gz #mv httpd-2.2.9/* . #rm -rf h ...

  8. 关于eclipse启动报错，an error has occurred.see the log file

    网上搜索各种方法,得知为由于Eclipse卡死或强制关闭之后会出现的情况 提供解决方法一: 查看log文件,发现有这样的信息: !MESSAGE The workspace exited with u ...

  9. [数据库]Sqlite使用入门

    官网的文档结构十分恶劣,大概翻了一下,提供入门指引. 0. sqlite的安装 根据自身情况,在官网下载32位/64位的dll文件以及sqlite-tools-win32-x86-3240000.zi ...

  10. 2017-9-8-visio制作lcd液晶背景

    看到别人的帖子有用visio做tft的背景图片的,十分感兴趣,电脑上也有visio,搞起.. 按照下图找到合适的模板(visio2010版本,其他版本应该会略有不同).​ 拖动界面左侧的各种丰富的小插 ...