【JQuery】DOM 的增删改插

操作 DOM

创建 DOM

• 格式：$(HTML字符串)
• 返回值：JQuery 对象

let $div = $('<div>创建的节点</div>');
console.log($div); // jQuery.fn.init [div]

插入 DOM

<div>
    <p class="old">旧的</p>
</div>

div {
    width: 100px;
    height: 100px;
    padding: 10px;
    background: lightcoral;
}

appendTo() & append()

• 格式：last.appendTo(parent) & parent.append(last)
• 插入子元素 last，last 成为最后一个子元素
• 返回值：插入的元素 last & 被插入的元素 parent

let $div = $('div');
let $p = $("<p>新加的</p>").addClass('new');
console.log($p.appendTo($div)); // jQuery.fn.init [p.new, …]
// console.log($div.append($p)); // jQuery.fn.init [div, …]

prependTo() & prepend()

• 格式：first.prependTo(parent) & parent.prepend(first)
• 插入子元素 first，first 成为第一个子元素
• 返回值：插入的元素 first & 被插入的元素 parent

let $div = $('div');
let $p = $("<p>新加的</p>").addClass('new');
// console.log($p.prependTo($div)); // jQuery.fn.init [p.new, …]
console.log($div.prepend($p)); // jQuery.fn.init [div, …]

insertAfter() & after()

• 格式：newRear.insertAfter(front) & front.after(newRear)
• 将 newRear 插到 front 后面
• 返回值：插入的元素 newRear & 被插入的元素 front

let $oldP = $('p.old');
let $newP = $("<p>新加的</p>").addClass('new');
console.log($newP.insertAfter($oldP)); // jQuery.fn.init [p.new, …]
// console.log($oldP.after($newP)); // jQuery.fn.init [p.old, …]

insertBefore() & before()

• 格式：newFront.insertBefore(rear)& rear.before(newFront)
• 将 front 插到 rear 前面
• 返回值：插入的元素 newFront & 被插入的元素 rear

let $oldP = $('p.old');
let $newP = $("<p>新加的</p>").addClass('new');
// console.log($newP.insertBefore($oldP)); // jQuery.fn.init [p.new, …]
console.log($oldP.before($newP)); // jQuery.fn.init [p.old, …]

替换 DOM

replaceWith()

• 格式：old.replaceWith(new);
• 用 old 替换 new
• 返回值：被替换的 old 标签

let $oldP = $('p.old');
let $newP = $("<p>新加的</p>").addClass('new');
console.log($oldP.replaceWith($newP)); // jQuery.fn.init [p.old, …]

replaceAll()

• 格式：new.replaceAll(old);
• 用 new 替换掉所有的 old
• 返回值：替换的 new 标签

let $oldP = $('p.old');
let $newP = $("<p>新加的</p>").addClass('new');
console.log($newP.replaceAll($oldP)); // jQuery.fn.init [p.new, …]

删除 DOM

remove()

• 格式：a.remove()
• 删除 a 标签元素
• 返回值：被删除的 a 元素

let $oldP = $('p.old');
console.log($oldP.remove()); // jQuery.fn.init [p.old, …]

empty()

• 格式：a.empty()
• 清除 a 标签元素的内容，a 标签自己还在
• 返回值：被清空的 a 标签

let $div = $('div');
console.log($div.empty()); // jQuery.fn.init [div, …]

包裹 DOM

• 格式：inner.wrap(outer)
• 在 inner 元素外包裹一个 outer 元素
• outer 可以为 HTML 字符串 / DOM 对象 / JQuery 对象

$("p").wrap("<div class='wrap'></div>");
$("p").wrap(document.createElement('div'));
$("p").wrap($("<div class='outer'></div>"));

以上操作，都会包括每一个 p 标签

• 返回值：被包裹的 inner 元素

console.log($("p").wrap("<div class='wrap'></div>")); // jQuery.fn.init [p.old, …]

克隆 DOM

克隆原生 JS 节点

• 格式：DOM.cloneNode(bool)
• 接收一个布尔参数：false → 只克隆节点，不克隆内容 (默认)；true → 内容也克隆

let div = document.getElementsByClassName('wrap')[0];
let divCopy = div.cloneNode(true);
document.body.appendChild(divCopy);

注意：该方法只克隆 DOM 元素，不会把元素身上绑定的事件也克隆过来

div.onclick(() => {
    console.log('点击事件');
})

克隆 JQuery 节点

• 格式：JQuery.clone(bool)
• 接收一个布尔参数：false → 只克隆对象，不克隆绑定的事件 (默认)；true → 绑定的事件也克隆

let $div = $('div.box');
$div.click(() => {
    console.log('点击事件');
})
let $divCopy = $div.clone(true);
$(document.body).append($divCopy);