jquery 插入節點的方法
方法 | 描述 | 示例 |
append() | 向每個匹配的元素內部追加內容 |
HTML代碼: <p>我想說:</p> jQuery代碼: $("p").append("<b>你好</b>") 結果: <p>我想說:<b>你好</b></p> |
appendTo() |
將所有匹配的元素追加到指定的元素中。 實際上,使用該方法是顛倒了常規的 $(A).append(B)的操作,即不是將B追加到 A中,而是將A追加到B中 |
HTML代碼: <p>我想說:</p> jQuery代碼: $("<b>你好</b>").appendTo("p") 結果: <p>我想說:<b>你好</b></p> |
prepend() | 向每個匹配的元素內部前置內容 |
HTML代碼: <p>我想說:</p> jQuery代碼: $("p").prepend("<b>你好</b>") 結果: <p><b>你好</b>我想說:</p> |
prependTo() |
將所有匹配的元素前置到指定的元素中。 實際上,使用該方法是顛倒了常規的 $(A).prepend(B)的操作,即不是將B前置到 A中,而是將A前置到B中 |
HTML代碼: <p>我想說:</p> jQuery代碼: $("<b>你好</b>").prependTo("p") 結果: <p><b>你好</b>我想說:</p> |
after() | 在每個匹配的元素之後插入內容 |
HTML代碼: <p>我想說:</p> jQuery代碼: $("p").after("<b>你好</b>") 結果: <p>我想說:</p><b>你好</b> |
insertAfter() |
將所有匹配的元素插入到指定元素的後面。 實際上,使用該方法是顛倒了常規的 $(A).after(B)的操作,即不是將B插入到A 後面,而是將A插入到B後面 |
HTML代碼: <p>我想說:</p> jQuery代碼: $("<b>你好</b>").insertAfter("p") 結果: <p>我想說:</p><b>你好</b> |
before() | 在每個匹配的元素之前插入內容 |
HTML代碼: <p>我想說:</p> jQuery代碼: $("p").before("<b>你好</b>") 結果: <b>你好</b><p>我想說:</p> |
insertBefore() |
將所有匹配的元素插入到指定的元素的前面。 實際上,使用該方法是顛倒了常規的 $(A).before(B)的操作,即不是將B插入 到A前面,而是將A插入到B前面 |
HTML代碼: <p>我想說:</p> jQuery代碼: $("<b>你好</b>").insertBefore("p") 結果: <b>你好</b><p>我想說:</p> |
jquery 插入節點的方法