当我们获得了某个DOM节点，想在这个DOM节点内插入新的DOM，应该如何做？

如果这个DOM节点是空的，例如，<div></div>，那么，直接使用innerHTML = '<span>child</span>'就可以修改DOM节点的内容，相当于“插入”了新的DOM节点。

如果这个DOM节点不是空的，那就不能这么做，因为innerHTML会直接替换掉原来的所有子节点。

有两个办法可以插入新的节点。一个是使用appendChild，把一个子节点添加到父节点的最后一个子节点。例如：

<!-- HTML结构 -->

<p id="js">JavaScript</p>

<div id="list">

    <p id="java">Java</p>

    <p id="python">Python</p>

    <p id="scheme">Scheme</p>

</div>

把<p id="js">JavaScript</p>添加到<div id="list">的最后一项：

var

    js = document.getElementById('js'),

    list = document.getElementById('list');

list.appendChild(js);

现在，HTML结构变成了这样：

<!-- HTML结构 -->

<div id="list">

    <p id="java">Java</p>

    <p id="python">Python</p>

    <p id="scheme">Scheme</p>

    <p id="js">JavaScript</p>

</div>

因为我们插入的js节点已经存在于当前的文档树，因此这个节点首先会从原先的位置删除，再插入到新的位置。

更多的时候我们会从零创建一个新的节点，然后插入到指定位置：

var

    list = document.getElementById('list'),

    haskell = document.createElement('p');

haskell.id = 'haskell';

haskell.innerText = 'Haskell';

list.appendChild(haskell);

这样我们就动态添加了一个新的节点：

<!-- HTML结构 -->

<div id="list">

    <p id="java">Java</p>

    <p id="python">Python</p>

    <p id="scheme">Scheme</p>

    <p id="haskell">Haskell</p>

</div>

动态创建一个节点然后添加到DOM树中，可以实现很多功能。举个例子，下面的代码动态创建了一个<style>节点，然后把它添加到<head>节点的末尾，这样就动态地给文档添加了新的CSS定义：

var d = document.createElement('style');

d.setAttribute('type', 'text/css');

d.innerHTML = 'p { color: red }';

document.getElementsByTagName('head')[0].appendChild(d);

可以在Chrome的控制台执行上述代码，观察页面样式的变化。

insertBefore

如果我们要把子节点插入到指定的位置怎么办？可以使用parentElement.insertBefore(newElement, referenceElement);，子节点会插入到referenceElement之前。

还是以上面的HTML为例，假定我们要把Haskell插入到Python之前：

<!-- HTML结构 -->

<div id="list">

    <p id="java">Java</p>

    <p id="python">Python</p>

    <p id="scheme">Scheme</p>

</div>

可以这么写：

var

    list = document.getElementById('list'),

    ref = document.getElementById('python'),

    haskell = document.createElement('p');

haskell.id = 'haskell';

haskell.innerText = 'Haskell';

list.insertBefore(haskell, ref);

新的HTML结构如下：

<!-- HTML结构 -->

<div id="list">

    <p id="java">Java</p>

    <p id="haskell">Haskell</p>

    <p id="python">Python</p>

    <p id="scheme">Scheme</p>

</div>

可见，使用insertBefore重点是要拿到一个“参考子节点”的引用。很多时候，需要循环一个父节点的所有子节点，可以通过迭代children属性实现：

var

    i, c,

    list = document.getElementById('list');

for (i = 0; i < list.children.length; i++) {

    c = list.children[i]; // 拿到第i个子节点

}

练习

对于一个已有的HTML结构：

  1. Scheme
  2. JavaScript
  3. Python
  4. Ruby
  5. Haskell
<!-- HTML结构 -->

<ol id="test-list">

    <li class="lang">Scheme</li>

    <li class="lang">JavaScript</li>

    <li class="lang">Python</li>

    <li class="lang">Ruby</li>

    <li class="lang">Haskell</li>

</ol>

按字符串顺序重新排序DOM节点：

var tmp = [], ol = document.getElementById('test-list');

for (var i of ol.children) {tmp.push(i);}

tmp.sort((x, y) => {return x.innerText > y.innerText;});

for (var j of tmp) {ol.appendChild(j)};

廖雪峰js教程笔记13 插入DOM的更多相关文章

  1. 廖雪峰js教程笔记12 用DOM更新 innerHMTL 和修改css样式

    拿到一个DOM节点后,我们可以对它进行更新. 可以直接修改节点的文本,方法有两种: 一种是修改innerHTML属性,这个方式非常强大,不但可以修改一个DOM节点的文本内容,还可以直接通过HTML片段 ...

  2. 廖雪峰js教程笔记11 操作DOM(包含作业)

    由于HTML文档被浏览器解析后就是一棵DOM树,要改变HTML的结构,就需要通过JavaScript来操作DOM. 始终记住DOM是一个树形结构.操作一个DOM节点实际上就是这么几个操作: 更新:更新 ...

  3. 廖雪峰js教程笔记10 浏览器对象

    JavaScript可以获取浏览器提供的很多对象,并进行操作. window window对象不但充当全局作用域,而且表示浏览器窗口. window对象有innerWidth和innerHeight属 ...

  4. 廖雪峰js教程笔记6 generator一个坑 看完python在回来填坑

    generator(生成器)是ES6标准引入的新的数据类型.一个generator看上去像一个函数,但可以返回多次. ES6定义generator标准的哥们借鉴了Python的generator的概念 ...

  5. 廖雪峰js教程笔记14 file文件操作

    在HTML表单中,可以上传文件的唯一控件就是<input type="file">. 注意:当一个表单包含<input type="file" ...

  6. 廖雪峰js教程笔记9 json

    JSON是JavaScript Object Notation的缩写,它是一种数据交换格式. 在JSON出现之前,大家一直用XML来传递数据.因为XML是一种纯文本格式,所以它适合在网络上交换数据.X ...

  7. 廖雪峰js教程笔记8 date对象介绍和处理

    在JavaScript中,Date对象用来表示日期和时间. 要获取系统当前时间,用: var now = new Date(); now; // Wed Jun 24 2015 19:49:22 GM ...

  8. 廖雪峰js教程笔记7 基本类型和包装类型

    在JavaScript的世界里,一切都是对象. 但是某些对象还是和其他对象不太一样.为了区分对象的类型,我们用typeof操作符获取对象的类型,它总是返回一个字符串: typeof 123; // ' ...

  9. 廖雪峰js教程笔记5 Arrow Function（箭头函数）

    为什么叫Arrow Function?因为它的定义用的就是一个箭头: x => x * x 上面的箭头函数相当于: function (x) { return x * x; } 箭头函数 阅读: ...

随机推荐

  1. 30个要点帮你完成java代码优化

    通过java代码规范来优化程序,优化内存使用情况,防止内存泄露 可供程序利用的资源(内存.CPU时间.网络带宽等)是有限的,优化的目的就是让程序用尽可能少的资源完成预定的任务.优化通常包含两方面的内容 ...

  2. Dom4j把xml转换成Map(非固定格式)

    将xml转换成Map,能够应对不用结构的xml,而不是只针对固定格式的xml.转换规则:1.主要是Map与List的互相嵌套2.同名称的节点会被装进List 示例: import java.util. ...

  3. win10 64位安装memcache扩展和开启redis扩展

    前面有关于win10下搭建wamp环境的介绍,在此不在赘述,php操作memcache有memcache库和memcached库,其中memcache是php内置的扩展库,支持面向对象和面向过程两种操 ...

  4. C# 的TCP Socket （同步方式）

    简单的c# TCP通讯(TcpListener) C# 的TCP Socket (同步方式) C# 的TCP Socket (异步方式) C# 的tcp Socket设置自定义超时时间 C# TCP ...

  5. 通过ipv6访问 g o o g l e

    Google.Youtube.Facebook等均支持IPv6访问,IPv4网络的用户大部分都无法访问,比如Gmail,Google Docs等等各种相关服务.而该类网站大部分均已接入IPv6网络,因 ...

  6. 使用excel结合线性规划求解Holt-Winters参数

      其实上面这个是Holt-Winters无季节趋势模型, 上面的S(t)对应下面的a(t)——截距(平滑值)            b(t)仍然对应b(t)——趋势,T对应k.           ...

  7. 使用excel计算指数平滑和移动平均

      指数平滑法 原数数据如下: 点击数据——数据分析 选择指数平滑 最一次平滑 由于我们选择的区域是B1:B22,第一个单元格“钢产量”,被当做标志,所以我们应该勾选标志.当我们勾选了标志后,列中的第 ...

  8. Git 简明教程

    其他Git资料: Git Community Book 中文版

  9. PHP程序员进阶学习书籍参考指南

    PHP程序员进阶学习书籍参考指南 @heiyeluren lastmodify: 2016/2/18     [初阶](基础知识及入门)   01. <PHP与MySQL程序设计(第4版)> ...

  10. [k]优雅的css

    1.图片文字列表 (2016-01-25) 1.1 实现效果图如下: 1.2 代码: html:( 代码十分优雅哦! ) <ul> <li class="step1&quo ...