使用jQuery修改DOM相當(dāng)簡(jiǎn)單

添加元素

append() 方法

在被選元素的結(jié)尾插入內(nèi)容（仍然該元素的內(nèi)部）

1. 可以一次添加多個(gè)內(nèi)容，內(nèi)容可以是DOM對(duì)象、HTML string、 jQuery對(duì)象
2. 如果參數(shù)是function，function可以返回DOM對(duì)象、HTML string、 jQuery對(duì)象，參數(shù)是集合中的元素位置與原來(lái)的html值

$("p").append("追加文本");

appendTo()方法

把對(duì)象插入到目標(biāo)元素尾部，目標(biāo)元素可以是selector, DOM對(duì)象, HTML string, 元素集合, jQuery對(duì)象;

$( "h2" ).appendTo( $( ".container" ) );

prepend() 方法

在被選元素的開(kāi)頭插入內(nèi)容。

$("p").prepend("在開(kāi)頭追加文本");

prependTo()方法

把對(duì)象插入到目標(biāo)元素頭部，目標(biāo)元素可以是selector, DOM對(duì)象, HTML string, 元素集合, jQuery對(duì)象;

$( ".container" ).before( $( "h2" ) );

after() 和 before() 方法

after() 方法在被選元素之后(不是頭部，而是外面，和對(duì)象并列同級(jí))插入內(nèi)容。
before() 方法在被選元素之前(不是頭部，而是外面，和對(duì)象并列同級(jí))插入內(nèi)容。

$("img").after("在后面添加文本");
 
$("img").before("在前面添加文本");

insertBefore(target)方法

把對(duì)象插入到target之前（不是頭部，是同級(jí)）

$( "h2" ).insertBefore( $( ".container" ) );

insertAfter(target)方法

把對(duì)象插入到target之后（不是頭部，是同級(jí)）

$( ".container" ).insertAfter( $( "h2" ) );

拓展

通過(guò) append() 和 prepend() 方法添加若干新元素

append() 和 prepend() 方法能夠通過(guò)參數(shù)接收無(wú)限數(shù)量的新元素。可以通過(guò) jQuery 來(lái)生成文本/HTML，或者通過(guò) JavaScript 代碼和 DOM 元素。
我們創(chuàng)建若干個(gè)新元素。這些元素可以通過(guò) text/HTML、jQuery 或者 JavaScript/DOM 來(lái)創(chuàng)建。然后我們通過(guò) append() 方法把這些新元素追加到文本中（prepend() 用法同樣）：

function appendText()
{
    var txt1="<p>文本。</p>";               使用 HTML 標(biāo)簽創(chuàng)建文本
    var txt2=$("<p></p>").text("文本。");  使用 jQuery 創(chuàng)建文本
    var txt3=document.createElement("p");
    txt3.innerHTML="文本。";               使用 DOM 創(chuàng)建文本
    $("body").append(txt1,txt2,txt3);         追加新元素
}

通過(guò) after() 和 before() 方法添加若干新元素

after() 和 before() 方法能夠通過(guò)參數(shù)接收無(wú)限數(shù)量的新元素?？梢酝ㄟ^(guò) text/HTML、jQuery 或者 JavaScript/DOM 來(lái)創(chuàng)建新元素。
我們創(chuàng)建若干新元素。這些元素可以通過(guò) text/HTML、jQuery 或者 JavaScript/DOM 來(lái)創(chuàng)建。然后我們通過(guò) after() 方法把這些新元素插到文本中（before() 用法同樣）：

function afterText()
{
    var txt1="<b>I </b>";                    // 使用 HTML 創(chuàng)建元素
    var txt2=$("<i></i>").text("love ");     // 使用 jQuery 創(chuàng)建元素
    var txt3=document.createElement("big");  // 使用 DOM 創(chuàng)建元素
    txt3.innerHTML="jQuery!";
    $("img").after(txt1,txt2,txt3);          // 在圖片后添加文本
}

刪除元素

remove()方法

刪除被選元素（及其子元素）

$("#div1").remove();

empty()方法

從被選元素中刪除子元素

$("#div1").empty();

detach()方法

移除被選元素，包括所有的文本和子節(jié)點(diǎn)。然后它會(huì)保留數(shù)據(jù)和事件。該方法會(huì)保留移除元素的副本，允許它們?cè)谝院蟊恢匦虏迦搿?如需移除元素及它的數(shù)據(jù)和事件，請(qǐng)使用 remove 方法代替。從被選元素移除內(nèi)容，請(qǐng)使用 empty() 方法)

$("button").click(function(){
    $("p").detach();
});   移除所有的 <p> 元素

包裹元素

text()方法
設(shè)置或返回所選元素的文本內(nèi)容，操作的是DOM的innerText值

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});

html()方法
這是一個(gè)讀寫兩用的方法，用于獲取/修改元素的innerHTML

1. 當(dāng)沒(méi)有傳遞參數(shù)的時(shí)候，返回元素的innerHTML
2. 當(dāng)傳遞了一個(gè)string參數(shù)的時(shí)候，修改元素的innerHTML為參數(shù)值

$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});