jquery中添加元素、创建元素、删除元素的几种方法

最新推荐文章于 2023-07-16 20:05:13 发布

原创最新推荐文章于 2023-07-16 20:05:13 发布 · 569 阅读

1 ·

CC 4.0 BY-SA版权

jquery 专栏收录该内容

15 篇文章

订阅专栏

本文深入讲解了使用jQuery进行DOM操作的方法，包括元素的增删改查，如append、prepend、after、before等方法的使用，以及如何通过jQuery创建元素、向元素前后添加多个元素和删除元素的具体实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一. append prepend after before
实例：
$("button").click(function () {
    var $div01 = $("div");
    $div01.append("---哈哈哈");
    $div01.prepend("嘿嘿嘿---");
    $div01.after("<div>这是第二个div标签</div>");
    $div01.before("<div>这是第0个div标签</div>");
})


二. 创建元素的3种方法

1. html创建
var txt1 = "<p>txt1.</p>";

2. jquery创建
var txt2 = $("<p></p>").text("txt2.");

3. DOM创建
var txt3 = document.createElement("p");
txt3.innerHTML = "txt3.";


三. 向元素前后一次添加多个元素
实例：
var div01 = $("div");
div01.before(txt1, txt2, txt3);
div01.append(txt1, txt2, txt3);
div01.after(txt1, txt2, txt3);
div01.prepend(txt1, txt2, txt3);


四. 删除元素
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素
实例：
$("button").click(function () {
    $("ul").remove(".ul01");
    $("p").remove();
    $("div").empty();
})