jQuery文档操作之插入操作

Posted 2021-01-01 yang-wei

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");