直接使用瀏覽器提供的API對DOM結構進行修改赞咙，不但代碼復雜饵隙，而且要針對瀏覽器寫不同的代碼。
有了jQuery歌粥，我們就專注于操作jQuery對象本身塌忽。底層的DOM操作由jQuery完成就可以了，這樣一來失驶，修改DOM也大大簡化了土居。
<p>
</br>
添加DOM
要添加新的DOM節(jié)點，除了通過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>
如何向列表新增一個語言？首先要拿到<ul>節(jié)點：
var ul = $(''#test-div>ul'');
然后涩堤，調用append()傳入HTML片段：
ul.append('<li><span>Haskell</span></li>');
除了接受字符串眷蜓，append()還可以傳入原始的DOM對象，jQuery對象和函數對象：
// 創(chuàng)建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節(jié)點痊远，只有傳入函數才能針對每個DOM生成不同的子節(jié)點垮抗。
append()把DOM添加到最后，prepend()則把DOM添加到最前碧聪。
另外注意冒版，如果要添加的DOM節(jié)點已經存在HTML文檔中。它會首先從文檔移除逞姿，然后再添加辞嗡，也就是說，用append(),你可以移動一個DOM節(jié)點滞造。
如果要把新節(jié)點插入到指定位置续室，例如，JavaScript和Python之間谒养，那么挺狰，可以先定位到JavaScript，然后用after()方法：
var js = $('#test-div>ul>li:first-child');
js.after('<li><span>Lua</span></li>');
也就是說，同級節(jié)點可以用after()或者before()方法丰泊。
<p>
</br>
刪除節(jié)點
要刪除DOM節(jié)點薯定，拿到jQuery對象后直接調用remove()方法就可以了。如果jQuery對象包含若干 DOM節(jié)點瞳购，實際上可以一次刪除多個DOM節(jié)點：
var li = $('test-div>ul>li');
li.remove(); // 所有<li>全被刪除
<p>
</br>
練習
除了列出的3種語言外话侄，請再添加Pascal、Lua和Ruby学赛，然后按字母順序排序節(jié)點：
<!-- HTML結構 -->
<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);
}
})();
結果顯示：
