jQuery零基礎入門——（六）修改DOM結構

《jQuery零基礎入門》系列博文是在廖雪峯老師的博文基礎上，可能補充了我的的理解和平常遇到的點，用個人理解表述出來，主幹出處來自廖雪峯老師的技術分享。

在《零基礎入門JavaScript》的時候咱們講過，如何利用原生的JS去修改DOM結構，但原生寫法太複雜，並且還要針對不一樣瀏覽器去作兼容。

有了jQuery，咱們就專一於操做jQuery對象自己，底層的DOM操做由jQuery完成就能夠了，這樣一來，修改DOM也大大簡化了。

添加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>

如何向列表新增一個語言？首先要拿到<ul>節點：

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()方法。

刪除節點

要刪除DOM節點，拿到jQuery對象後直接調用remove()方法就能夠了。若是jQuery對象包含若干DOM節點，實際上能夠一次刪除多個DOM節點：

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