全栈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 & welcome, <b>"reader"!</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的更多相关文章
- “全栈2019”Java第九十九章：局部内部类与继承详解
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
- “全栈2019”Java第二十九章：数组详解（中篇）
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
- “全栈2019”Java第十九章：关系运算符、条件运算符和三元运算符
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
- 全栈JavaScript之路（十八）HTML5 自己定义数据属性
HTML5 规范规定,用户能够为元素 自己定义非标准属性, 可是要加入 data- 前缀. 目的是为元素提供与页面渲染无关的信息.或者语义信息.这些属性名能够任意加入,仅仅要带上前缀 data- 开头 ...
- 全栈JavaScript之路（十六）HTML5 HTMLDocument 类型的变化
HTML5 扩展了 HTMLDocument, 添加了新的功能. 1.document.readState = 'loading' || 'complete' //支持readyState 属性的浏 ...
- 全栈JavaScript之路（ 二十 ）HTML5 插入 html标记 （ 二 ）insertAdjacentHTML
insertAdjacentHTML(), 这种方法也是在IE中最早出现的.如今已纳入html5规范,它接受两个參数,一个是下列的标记之中的一个,一个是要写入的 html 代码文本. beforeb ...
- 全栈JavaScript之路（十四）HTML5 中与class属性相关的扩充
1. getElementByClassName() :支持getElementsByClassName()方法的浏览器有IE 9+.Firefox 3+.Safari 3.1+.Chrome 和 O ...
- 全栈JavaScript之路（十七）HTML5 新增字符集属性
HTML5 添加�了几个文档字符集属性. document.charset : 表示文档的实际使用的字符集. document.defaultCharset: 表示默认的字符集,跟浏览器以及操作系统设 ...
- 全栈JavaScript之路（ 二十二 ）IE 专有扩展——文档模式
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/hatmore/article/details/37611911 ie8 引入了一个新的概念.&quo ...
随机推荐
- Java常用API——时间类
前言:Java.util.*工具包中,包含了集合框架,旧集合类,事件模型,日期和时间设施,国际化和其他使用程序类 (字符串.随机数生成器和位数组) 一.日期类Date 1.概述 Date是一个薄包装类 ...
- Effective前端1---chapter 1 HTML/CSS优化
最近在读高效前端:web高效编程与优化实践,借此本书的感受总结下前端代码与性能优化,纯属自己见解,如有错误,欢迎指出. 1.能用HTML/CSS解决的问题就不要用js 场景1:鼠标悬浮时显示 鼠标悬浮 ...
- SpringSecurity整合JWT
一.前言 最近负责支付宝小程序后端项目设计,这里主要分享一下用户会话.接口鉴权的设计.参考过微信小程序后端的设计,会话需要依靠redis.相关的开发人员和我说依靠Redis并不是很靠谱,redis在业 ...
- asp.net core Session的测试使用心得及注意事项
sp.net-core中Session是以中间件的形式注册使用的.不比asp.net中的使用,直接使用Session就行. 首先在.net-core框架中注入Session中间件,首先在Configu ...
- Python内存管理以及数据类型
一.内存管理 1.Cpython解释器的垃圾回收机制 什么是垃圾:当一个值身上没有绑定任何变量名(该值的引用计数=0)时,该值就是一个垃圾. Cpython解释器就会自动回收这样的垃圾. #引用计数增 ...
- [蓝点ZigBee] Zstack 之点亮OLED液晶 ZigBee/CC2530 视频资料
这一小节主要演示如何在Zstack 下移植液晶驱动,我们选取了目前比较流行的OLED 作为移植目标. 移植关键点 1 修改 GPIO pin, 2 如何将Zstack ...
- （转）JavaWeb学习之Servlet（一）----MyEclipse及Tomcat的配置
[声明] 欢迎转载,但请保留文章原始出处→_→ 文章来源:http://www.cnblogs.com/smyhvae/p/4134921.html [开发环境] 物理机版本:Win 7旗舰版(64位 ...
- Vue.Js初学踩坑
1 Vue2之后取消了v-bind的.sync修饰符,意味着父子组件的数据不能以此来实现双向绑定. 2 Vue2之后取消了filterBy过滤器,所以以下这种用法是错误的了. <tbody> ...
- CallContext，ThreadStatic，AsyncLocal<T>，ThreadLocal<T>，学习笔记
1.CallContext 在当前调用上下文的线程数据槽里存储对象 2.ThreadStatic 是一个特性 3.AsyncLocal<T> 是一个类型,该字段应当为static,保证单例 ...
- android Resources 类的使用
使用 R.<resource_type>.<resource_name> 获取的是资源的一个 id (int 类型), 但有时候我们需要获取资源本身,这时候我们可以通过 Res ...