jQuery文檔操作之插入操作

標籤：添加   script   tee   java   元素   query   element   pen   ndt   

append()

文法

父元素.append(子項目)

解釋：追加某元素，在父元素中添加新的子項目。子項目可以為：string/element(js對象)/jQuery元素

代碼如下：

var oli = document.createElement("li");oli.innerHTML = "哈哈哈";$("ul").append("<li>123</li>");$("ul").append("oli");$("ul").append($("#app"));

PS：如果追加的是jQuery對象，那麼這些元素將從原位置上消失。簡單來說，就是一個移動操作。

appendTo()
文法：

子項目.appendTo(父元素)

解釋：追加到某元素，子項目添加到父元素

程式碼範例：

$("<li>This is the first.</li>").appendTo($("ul")).addClass("active")

PS：要添加的元素同樣既可以是string/element(js對象)/jQuery元素

prepend()

文法：

父元素.prepend(元子素);

解釋：前置添加，添加到父元素的第一個位置

$("ul").prepend("<li>This is the first.</li>")

prependTo()

文法：

子項目.prependTo(父元素);

解釋：前置添加，添加到父元素的第一個位置

$("<li>This is the first.</li>").prependTo("ul");

after()

文法：

兄弟元素.after(要插入的兄弟元素)

解釋：在匹配的元素之後插入內容

$("ul").after(‘<h4>我是一個標題</h4>‘)

inserAfter()

文法：

要插入的兄弟元素.inserAfter(兄弟元素);

解釋：在匹配的元素之後插入內容

$("<h5>我是一個標題</h5>").inserAfter("ul");

before()

文法：

兄弟元素.before(要插入的兄弟元素);

解釋：在匹配的元素之前插入內容

$("ul").before(‘<h3>我是一個標題</h3>‘);

inseBefore

文法：

要插入的兄弟元素.inseBefore(兄弟元素);

解釋：在匹配的元素之前插入內容

$("h5>我是一個標題</h5").inseBefore("ul");

jQuery文檔操作之插入操作