JQuery学习之路Part6：元素的操作(添加元素、清空元素、克隆元素)

旧城等待， 2023-07-12 16:05 490阅读 0赞

# 一、添加元素 #

`prepend()`**：在被选元素的儿子的最前面插入内容**  
例：

$("p").prepend("Some text.");

--------------------

`prependTo()`**：插入在被选元素的儿子的最前面**  
例：

$("<b>Some text.</b>").prependTo("p")

**区别**：

a.prepend(b) = b.prependTo(a)

用途：对象不一样 可以串联函数

--------------------

`append()`**：在被选元素的儿子的最后面插入内容**  
例：

$("p").append("Some text.");

--------------------

`appendTo()`**：插入在被选元素的儿子的最后面**  
例：

$("<b>Some text.</b>").appendTo("p")

**区别**：

a.append(b)=b.appendTo(a)

用途：对象不一样 可以串联函数

--------------------

`before()`**：在被选元素的之前插入内容**  
例：

$("img").before("Some text before");

--------------------

`after()`**：在被选元素的之后插入内容**  
例：

$("img").after("Some text after");

--------------------

### 批量添加若干新元素 ###

例一：

function appendText()
    {
        
    	var txt1="<p>Text.</p>";// 以HTML的方式创建新元素
    	var txt2=$("<p></p>").text("Text.");// 以JQuery的方式创建新元素
    	var txt3=document.createElement("p");// 以DOM的方式创建新元素
    	txt3.innerHTML="Text.";
    	$("p").append(txt1,txt2,txt3);// 一次性追加新元素
    }

例二：

function afterText()
    {
        
    	var txt1="<b>I </b>";// 以HTML的方式创建新元素
    	var txt2=$("<i></i>").text("love ");// 通过JQuery的方式创建新元素
    	var txt3=document.createElement("big");// 通过DOM的方式创建新元素
    	txt3.innerHTML="jQuery!";
    	$("img").after(txt1,txt2,txt3);// 在img之后一次性批量插入新元素
    }

--------------------

# 二、清空元素 #

`remove()`**：删除被选元素及其子元素**  
即 **清空整个元素(包括自己的标签)**  
例：

$("#div1").remove();

--------------------

该方法还可以有选择性地**过滤**被删除的元素  
例：

$("p").remove(".apple");

删除 class=“apple” 的所有`<p>`元素

--------------------

`empty()`**：删除被选元素的子元素**  
即 **清空元素里的全部内容(不包括自己的标签)**  
例：

$("#div1").empty();

--------------------

# 三、克隆元素 #

生成指定元素的**副本** 包含子节点 文本和属性

语法：`clone([复制程度])`  
例：

$("span").clone().appendTo("body");

克隆所有的span元素并插入到body元素的结尾

复制程度：  
(默认为false)  
true：**深复制 - 会复制事件**  
false：**浅复制 - 不复制事件**

--------------------

发表评论取消回复

表情：

评论列表（有 0 条评论，490人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery - 添加元素

通过 jQuery，可以很容易地添加新元素/内容。 -------------------- 添加新的 HTML 内容我们将学习用于添加新内容的四个 jQuery

不念不忘少年蓝@/ 2024年03月16日 10:19/ 0 赞/ 68 阅读

相关 JQuery学习之路Part6：元素的操作(添加元素、清空元素、克隆元素)

一、添加元素 `prepend()`：在被选元素的儿子的最前面插入内容例： $("p").prepend("Some text."); --------

旧城等待，/ 2023年07月12日 16:05/ 0 赞/ 491 阅读

相关 JQuery学习之路Part2：用选择器获取元素

JQuery基本语法都会带有$美元符号该符号可以修改： var jq=jQuery.noConflict() 如此就可以用jq代替美元符号了 ------

Dear 丶/ 2023年07月12日 06:28/ 0 赞/ 21 阅读

相关 jQuery 之添加元素（八）

通过 jQuery，可以很容易地添加新元素/内容。添加新的 HTML 内容，我们将学习用于添加新内容的四个 jQuery 方法。 append() - 在被选元素的结尾插入内

痛定思痛。/ 2022年09月23日 13:50/ 0 赞/ 3 阅读

相关 jQuery HTML之捕获、设置、元素添加、元素删除

一、jQuery:捕获HTML 1.1 jQuery - 获取内容和属性获得内容 - text()、html() 以及 val() 三个简单实用的用于 DOM

墨蓝/ 2022年06月14日 10:09/ 0 赞/ 332 阅读

相关 jQuery_元素操作

一.高度和宽度获取高度： $("div").height(); // 高度 $("div").width(); //宽度

我就是我/ 2022年05月22日 12:39/ 0 赞/ 271 阅读

相关 jQuery之添加元素

任务描述本关任务：用jQuery添加元素。效果如下： ![206605][] 相关知识为了完成本关任务，你需要掌握：1.`append(),prepend()

野性酷女/ 2022年04月05日 04:38/ 0 赞/ 331 阅读

相关 jQuery添加元素

[jquery如何在元素后面添加一个元素][jquery] [jQuery][]添加插入元素技巧： jquery添加分为在指定元素的里面添加和外面添加两种：里面添加使用

青旅半醒/ 2022年01月28日 14:55/ 0 赞/ 359 阅读

相关 jQuery - 添加元素

添加新的 HTML 内容 append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元

男娘i/ 2021年09月15日 07:46/ 0 赞/ 506 阅读

相关 JQuery添加删除元素

JQuery提供了添加元素的四种方法： append() - 在被选元素内部的结尾插入指定内容 prepend() - 在被选元素内部的开头插入指定内容 after()

末蓝、/ 2021年09月14日 02:44/ 0 赞/ 604 阅读