在须要给文档插入大量的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. sql语句中start with用法，用于表达一个复杂的目录树存储在一张表中

    select * from tablename start with 条件1 connect by prior 条件2 where 条件3

  2. 【LeetCode算法-20】Valid Parentheses

    LeetCode第20题 Given a string containing just the characters '(', ')', '{', '}', '[' and ']', determin ...

  3. Linux 中 Windows 中文乱码

    Linux 下 Windows 源代码中文乱码 由于 windows 和 linux 对文本的编码方式不同,所以经常会有 windows 中生成的文本在 linux 中打开乱码的情况. 比如: 我面临 ...

  4. 在Windows系统下安装Beautiful Soup4的步骤和方法

    1.到http://www.crummy.com/software/BeautifulSoup/网站上上下载,最新版本是4.3.2. 2.下载完成之后需要解压缩,假设放到D:/python下. 3.运 ...

  5. python函数（一）调用函数

    在python中内置了很多函数或者类,比如:int,str,list,tuple,等.当然也可以自建函数,这个放在后文讨论.原理如下: 其实python中的类和方法非常非常多,这里只是以点带面,提供一 ...

  6. 2017-9-8-李明Linux：Linux应用与发展

    1965年,MIT.通用电气&贝尔实验室联合开发分时操作系统Multics,没有项目管理概念和追求目标过于庞大导致项目失败:1969年,参加过该项目的贝尔实验室成员肯 ·汤普森对自己开发的游戏 ...

  7. JN5139 zigbee 资料

    JN5139模块是一系列可以使使用者在最短的时间内在最低的成本下实现IEEE802.15.4或ZigBee兼容系统的表贴模块.此款模块减少了用户对于RF板设计和测试框架的昂贵漫长的开发时间.这些模块利 ...

  8. Hibernate的核心接口

    Hibernate5个核心接口 所有Hibernate应用中都会访问Hibernate的5个核心接口 Configuration接口:配置Hibernate,根启动Hibernate,创建Sessio ...

  9. SSH密钥登录让Linux VPS/服务器更安全

    查看 /var/log 登录日志文件,突然发现服务器被人扫描端口在进行暴力攻击 平常登录服务器,都是使用用户密码登录,看来这样的做法并不安全,不得不关闭密码登录了. 总结了一个putty使用密钥自动登 ...

  10. BZOJ5100 : [POI2018]Plan metra

    若$1$到$n$之间没有其它点,则$1$到$n$的距离为任意一点到它们距离的差值,按照距离关系判断每个点是挂在$1$上还是挂在$n$上即可. 否则$1$到$n$的距离只可能为任意一点到它们距离和的最小 ...