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文檔操作之插入操作