正如我們?cè)谝郧暗恼n程中所看到的,html()和text()方法可以用于獲取和設(shè)置所選元素的內(nèi)容。 然而,當(dāng)這些方法用于設(shè)置內(nèi)容時(shí),現(xiàn)有內(nèi)容將丟失。
jQuery具有用于將新內(nèi)容添加到所選元素而不刪除現(xiàn)有內(nèi)容的方法:
append()在所選元素的末尾插入內(nèi)容。
prepend()在所選元素的開(kāi)頭插入內(nèi)容。
after()插入所選元素后的內(nèi)容。
before()在所選元素之前插入內(nèi)容。
append()方法在所選HTML元素的末尾插入內(nèi)容。
例如:
HTML:
<p id="demo">Hi </p>
JS:
$(function() { $("#demo").append("David"); }); //最終輸出 "Hi David"
類(lèi)似地,prepend()方法將插入所選元素的開(kāi)始內(nèi)容。
您還可以使用HTML標(biāo)記的內(nèi)容。
jQuery after()和before()方法在所選HTML元素之前插入內(nèi)容。
例如:
HTML:
<p id="demo">Hi</p>
JS:
$(function() { $("#demo").before("<i>Some Title</i>"); $("#demo").after("<b>Welcome</b>"); });
append(),prepend(),before()和after()方法也可用于添加新創(chuàng)建的元素。
使用jQuery創(chuàng)建新HTML元素的最簡(jiǎn)單方法如下:
var txt = $("<p></p>").text("Hi");
上面的代碼創(chuàng)建一個(gè)新的<p>元素,其中包含文本Hi,并將其分配給一個(gè)名為txt的變量。
現(xiàn)在,我們可以將該變量作為上述方法的參數(shù)添加到我們的HTML中,例如:
HTML:
<p id="demo">Hello</p>
JS:
$(function() { var txt = $("<p></p>").text("Hi"); $("#demo").after(txt);
});
這將在#demo段落之后插入新創(chuàng)建的<p>元素。
您也可以通過(guò)使用逗號(hào)分隔來(lái)指定多個(gè)元素作為before(),after(),append(),prepend()方法的參數(shù):$(“#demo”)。append(var1,var2,var3)。
The above mentioned syntax for creating elements can be used to create any new HTML element, for example $("<div></div>") creates a new div.
var a = $("< >"); ("#txt").append( );