# Jquery添加元素（append，prepend，after，before四種方法區別對比） 轉載鏈接：[https://blog.csdn.net/lzx159951/article/details/79097253](https://blog.csdn.net/lzx159951/article/details/79097253) jquery是一個平常比較喜歡用的js框架，因為上手比較簡單吧，哈哈，下面呢，就介紹一下Jquery中如何添加元素。jquery添加元素一共有四個語句，分別是append（），prepend（），after（），before（） * append的用法 這個方法的意思是在選中目標的結尾插入內容。舉個例子： ~~~ <p>hello</p> ~~~ 如果執行下面這個插入語句，上面的語句會變成什么樣子 ~~~ $("p").append("<b>world</b>") ~~~ 執行了這個插入語句會變成 ~~~ <p>hello<b>world</b></p> ~~~ 也就是說，在插入的結尾標簽前插入此內容。 * prepend的用法。 顧名思義，跟上面一種用法相反，就是在標簽開始的地方插入內容。 還是以上面第一段代碼為例子。 ~~~ $("p").prepend("<b>world</b>")//插入語句 <p><b>world</b>hello</p>//結果 ~~~ * after的用法 這個語句的用法就是在被選元素之后插入內容。 同樣以上面的為例子。 ~~~ $("p").after("<b>world</b>")//插入語句 <p>hello</p><b>world</b>//結果 ~~~ 在選中標簽后面插入內容 * before的用法 跟after相反，在標簽前面插入內容 ~~~ $("p").before("<b>world</b>")//插入語句 <b>world</b><p>hello</p>//結果 ~~~ 下面把這四種用法的代碼放在一塊，更容易理解。 ~~~ <p>hello</p> $("p").append("<b>world</b>")使用append插入 <p>hello<b>world</b></p>//顯示結果 $("p").prepend("<b>world</b>")//使用prepend插入 <p><b>world</b>hello</p>//顯示結果 $("p").after("<b>world</b>")//使用after插入語句 <p>hello</p><b>world</b>//顯示結果 $("p").before("<b>world</b>")//使用before插入語句 <b>world</b><p>hello</p>//顯示結果 ~~~ 是不是很簡單呀，大家是不是都已經掌握了。本人新手，如哪里有說的不恰當的地方，歡迎大家指點。