直接使用瀏覽器提供的API對(duì)DOM結(jié)構(gòu)進(jìn)行修改，不但代碼復(fù)雜，而且要針對(duì)瀏覽器寫不同的代碼。
有了jQuery，我們就專注于操作jQuery對(duì)象本身。底層的DOM操作由jQuery完成就可以了，這樣一來，修改DOM也大大簡化了。
<p>
</br>

添加DOM

要添加新的DOM節(jié)點(diǎn)，除了通過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>

如何向列表新增一個(gè)語言？首先要拿到<ul>節(jié)點(diǎn)：

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

然后，調(diào)用append()傳入HTML片段：

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

除了接受字符串，append()還可以傳入原始的DOM對(duì)象，jQuery對(duì)象和函數(shù)對(duì)象：

//  創(chuàng)建DOM對(duì)象：
var ps = document.createElement('li');
ps.innerHTML = '<span>Pascal</span>';
//  添加DOM對(duì)象：
ul.append(ps);

// 添加jQuery對(duì)象：
ul.append($('#scheme'));

//  添加函數(shù)對(duì)象：
ul.append(function (index, html) {
      return '<li><span>Language - ' + index +'</span></li>';
});

傳入函數(shù)時(shí)，要求返回一個(gè)字符串、DOM對(duì)象或者jQuery對(duì)象。因?yàn)閖Query的append()可能作用于一組DOM節(jié)點(diǎn)，只有傳入函數(shù)才能針對(duì)每個(gè)DOM生成不同的子節(jié)點(diǎn)。
append()把DOM添加到最后，prepend()則把DOM添加到最前。
另外注意，如果要添加的DOM節(jié)點(diǎn)已經(jīng)存在HTML文檔中。它會(huì)首先從文檔移除，然后再添加，也就是說，用append(),你可以移動(dòng)一個(gè)DOM節(jié)點(diǎn)。

如果要把新節(jié)點(diǎn)插入到指定位置，例如，JavaScript和Python之間，那么，可以先定位到JavaScript，然后用after()方法：

var js = $('#test-div>ul>li:first-child');
js.after('<li><span>Lua</span></li>');

也就是說，同級(jí)節(jié)點(diǎn)可以用after()或者before()方法。
<p>
</br>

刪除節(jié)點(diǎn)

要?jiǎng)h除DOM節(jié)點(diǎn)，拿到j(luò)Query對(duì)象后直接調(diào)用remove()方法就可以了。如果jQuery對(duì)象包含若干 DOM節(jié)點(diǎn)，實(shí)際上可以一次刪除多個(gè)DOM節(jié)點(diǎn)：

var li = $('test-div>ul>li');
li.remove();  // 所有<li>全被刪除

<p>
</br>

練習(xí)

除了列出的3種語言外，請(qǐng)?jiān)偬砑覲ascal、Lua和Ruby，然后按字母順序排序節(jié)點(diǎn)：

<!-- HTML結(jié)構(gòu) -->
<div id="test-div">
    <ul>
        <li><span>JavaScript</span></li>
        <li><span>Python</span></li>
        <li><span>Swift</span></li>
    </ul>
</div>

'use strict';
function add(L){
    return '<li><span>'+ L + '</span></li>'
}
$('div#test-div>ul').append(['Pascal','Lua','Ruby'].map(add));
var arr = $('div#test-div>ul>li').map(function(){
    return this.innerHTML;
}).get().sort();
$('div#test-div>ul>li').remove();
$('div#test-div>ul').append(arr.map(add))

// 測試:
;(function () {
    var s = $('#test-div>ul>li').map(function () {
        return $(this).text();
    }).get().join(',');
    if (s === 'JavaScript,Lua,Pascal,Python,Ruby,Swift') {
        alert('測試通過!');
    } else {
        alert('測試失敗: ' + s);
    }
})();

結(jié)果顯示：