当我们获得了某个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. jedis池的作用

    一.jedis池的介绍 相信大家都用过线程池或者是jdbc的连接池,使用池可以减少系统在使用所需对象时创建对象的开销,从而提高系统性能和效率.jedis池也是如此,那么我们该如何使用jedis池呢? ...

  2. CSS复习

    CSS 选择器 p.into  表示带有into类的p元素 伪类: a)      first-line b)      last-line 伪元素: :before  能在指定的元素前添加内容(创造 ...

  3. win7使用iis并搭建 图片服务器

    1.打开控制面板 2.程序-卸载程序 3.点击左边的 打开或关闭windows功能 4.如下图所示,找到internet信息服务勾选.顺便把FTP服务器也全部勾选了,后面会用到 5.进入 控制面板 – ...

  4. 关于application/x-www-form-urlencoded等字符编码的解释说明

    在Form元素的语法中,EncType表明提交数据的格式 用 Enctype 属性指定将数据回发到服务器时浏览器使用的编码类型. 下边是说明: application/x-www-form-urlen ...

  5. jsp页面中引用其他页面的方法

    初看这个标题....大家的感觉一定是好2啊.....博主一定要说jsp的动态引用(jsp:include)和静态引用(@include)了.介绍这两者区别的文章已经烂大街了..一搜一大把..博主竟然还 ...

  6. 2012-2013 ACM-ICPC Northeastern European Regional Contest (NEERC 12)

    Problems     # Name     A Addictive Bubbles1 addictive.in / addictive.out 2 s, 256 MB    x438 B Blin ...

  7. Javascript的动态增加‘类’的方法

    1.我们可以为每一个实例对象增加方法.也就是说我们在每次使用‘类’之外的方法时候,都需要创建一次. function Dog(){ window.alert('I  am a dog!'); } va ...

  8. Mac Pro 编译安装 Redis-3.2.3

    Redis官方下载地址:http://redis.io/download Redis安装 cd /usr/local/src/redis-3.2.3 sudo make sudo make insta ...

  9. php万年历

    最近学习php循环.日期显示.GET方式请求,进而实现了一个小程序. 直接上代码: <?php header("Content-type:text/html; charset=UTF- ...

  10. BitMap算法应用：Redis队列滤重优化

    工作中有用到Redis滤重队列. 原来的方法如下: 方法一 为了保证操作原子性,使用Redis执行Lua脚本. 在脚本中的逻辑是,如果队列不超过某个数值,进行一次lrem操作(队列使用list结构), ...