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