当我们获得了某个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. 5G为何采纳华为力挺的Polar码？一个通信工程师的大实话

    Polar码被采纳为5G eMBB场景的控制信道编码,这两天连续被这条消息刷屏,连吃瓜群众都直呼好爽. 然而,随着媒体报道的持续发酵,真相在口口相传中变了形,不乏夸大不实之嫌,小编终于坐不住了,也想吐 ...

  2. Java文件写入，换行

    import java.io.BufferedWriter; import java.io.File; import java.io.FileWriter; import java.io.IOExce ...

  3. php桥接设计模式

    <?php //桥接模式 abstract class info{ protected $send=null; public function __construct($send){ $this ...

  4. C#虚函数和接口的区别

    接口只能声明不能实现,虚函数可以. 接口:对外提供可以访问的函数叫接口.虚函数不需要被强制重写,其本身含有实现部分. 抽象类:指派了派生类必须实现的函数(纯虚函数),不然编译不通过. 虚函数的限制:  ...

  5. [Unity] Shader(着色器）之固定管线

    在Unity中,固定管线Shader的性能是最好的. 什么是固定管线呢? 固定渲染管线 —— 这是标准的几何&光照(T&L)管线,功能是固定的,它控制着世界.视.投影变换及固定光照控制 ...

  6. Linux 命令收集

    http://www.cnblogs.com/tzhangofseu/archive/2011/12/17/2290955.html vim :r filename :sh  enter shell ...

  7. 2Struts2配置----青软S2SH(笔记)

    实例的文件目录如下:两个配置文件(web.xml和struts.xml),一个UserAction.java,三个jsp. 1.配置Struts2应用环境: 下载Struts2的jar包,官网是:ht ...

  8. ASP.NET WEB API路由机制

    (一)路由原理 (二)路由设计架构分析 RouteBase

  9. java8入门 错误：找不到或者无法加载主类

    如果你也遇上的这个问题,但是如果你的Java版本不是6以上,这个解决方案可能就不适合你... 最近在跟着李兴华老湿的视频<<编程开发入门Java 8>>的学习Java... 但 ...

  10. DbHelper为什么要用Using？

    我们分析一下DbHelper做什么事情,大家都知道它用于数据库的连接操作,这里的数据库连接会创建非托管资源,c#的垃圾回收机制不会对它处理,需要实现IDisposable接口手动释放.   手动释放的 ...