添加DOM

要添加新的DOM节点，除了通过jQuery的 html() 这种暴力方法外，还可以用 append() 方法，例如：

<div id="test-div">

<ul>

<li><span>JavaScript</span></li>

<li><span>Python</span></li>

<li><span>Swift</span></li>

</ul>

</div>

如何向列表新增一个语言？首先要拿到 &lt;ul&gt; 节点：

var ul = $('#test-div>ul');

然后，调用 append() 传入HTML片段：

ul.append('<li><span>Haskell</span></li>');

除了接受字符串， append() 还可以传入原始的DOM对象，jQuery对象和函数对象：

// 创建DOM对象:

var ps = document.createElement('li');

ps.innerHTML = '<span>Pascal</span>';

// 添加DOM对象:

ul.append(ps);



// 添加jQuery对象:

ul.append($('#scheme'));



// 添加函数对象:

ul.append(function (index, html) {

return '<li><span>Language - ' + index + '</span></li>';

});

传入函数时，要求返回一个字符串、DOM对象或者jQuery对象。因为jQuery的 append() 可能作用于一组DOM节点，只有传入函数才能针对每个DOM生成不同的子节点。

append() 把DOM添加到最后， prepend() 则把DOM添加到最前。

另外注意，如果要添加的DOM节点已经存在于HTML文档中，它会首先从文档移除，然后再添加，也就是说，用 append() ，你可以移动一个DOM节点。

如果要把新节点插入到指定位置，例如，JavaScript和Python之间，那么，可以先定位到JavaScript，然后用 after() 方法：

var js = $('#test-div>ul>li:first-child');

js.after('<li><span>Lua</span></li>');

也就是说，同级节点可以用 after() 或者 before() 方法。