insert与append是d3中用于新增元素的方法，它们的用法完全相同，作用也完全相同，唯一的差别在于insert可以指定将新元素插入在什么位置，而append只能将元素添加在末尾。

      insert与append的作用过程可分为两步来理解，第一步是新增元素，第二步是选择新增元素，也就是说insert、append操作返回的结果都是新增的元素。

      在对页面上已存在的html元素，insert、append会在已存在的元素中添加新的子节点，而对于页面中不存在的元素，它们则是直接添加新增的元素，而非子节点，请参照代码说明。

      依旧假定页面中存在的HTML文档结构如下：

<ul class="list-group" id="list-group">    <li class="list-group-item">0001</li>    <li class="list-group-item">0002</li>    <li class="list-group-item">0003</li></ul>

• 1
• 2
• 3
• 4
• 5

      操作的代码如下：

//  选择器唯一性识别函数var iden = function(d) {    //  如果已设置数据，则直接返回数据，否则返回内容解析后的整数    return d !== undefined ? d : parseInt(this.textContent);};//  如果是页面中已存在的html元素var items = d3.select("#list-group")                .selectAll(".list-group-item")                .data([2, 3, 4, 5], iden)                .exit() //  结果为第1个元素                .append("strong")                .text('yiifaa');alert(items.html()) //  输出yiifaa，此时items指向strong元素//  现在第一个元素的outerHTML为//  <li class="list-group-item">0001<strong>yiifaa</strong></li>//  如果是页面中不存在的元素items = d3.select("#list-group")                .selectAll(".list-group-item")                //  这里不添加唯一性识别函数，是因为上面添加了yiifaa字符，解析会出错                .data([2, 3, 4, 5])                .enter() //  结果为[5], 最后一个元素                .append("strong")                .text('yiifaa');alert(items.html()) //   输出yiifaa，此时items指向新增的元素，亦即最后一个元素，//  最后一个元素的outerHTML为// <li class="list-group-item">yiifaa</li>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27

      上面都是append的用法，insert的用法完全相同，只是多了一个用于指示插入位置的参数，示例如下：

var item = d3.select("#list-group")            //  在#list-group的第2个子元素之前插入一个节点           .insert("li", ".list-group-item:nth-child(2)")           .classed("list-group-item", true)           .text("0004");item.classed("active", true);    

• 1
• 2
• 3
• 4
• 5
• 6