jQuery中 DOM节点操作方法大全

在jQuery中，DOM节点操作是非常常见和重要的，本文将会介绍jQuery中常用的DOM节点操作方法，包括增删改查等操作。

一、添加节点操作

append和appendTo

• append：向元素内部的最后面添加新的元素
• appendTo：将新的元素添加到现有元素的内部的最后面

示例代码如下：

// 在id为test的元素内部的最后面添加一个<p>元素
$("#test").append("<p>这是新增加的元素</p>"); 

// 新创建一个p元素，插入到id为test1的元素的内部最后面
$("<p>这是新增加的元素</p>").appendTo("#test1"); 

prepend和prependTo

• prepend：向元素内部的最前面添加新的元素
• prependTo：将新的元素添加到现有元素的内部的最前面

示例代码如下：

// 在id为test的元素内部的最前面添加一个<p>元素
$("#test").prepend("<p>这是新增加的元素</p>"); 

// 新创建一个p元素，插入到id为test1的元素的内部最前面
$("<p>这是新增加的元素</p>").prependTo("#test1"); 

before和insertBefore

• before：在元素之前添加新的元素
• insertBefore：将新的元素添加到现有元素的之前

示例代码如下：

// 在id为test元素之前添加一个<p>元素
$("#test").before("<p>这是新增加的元素</p>"); 

// 新创建一个p元素，插入到id为test1元素的之前
$("<p>这是新增加的元素</p>").insertBefore("#test1");  

after和insertAfter

• after：在元素之后添加新的元素
• insertAfter：将新的元素添加到现有元素的之后

示例代码如下：

// 在id为test元素之后添加一个<p>元素
$("#test").after("<p>这是新增加的元素</p>"); 

// 新创建一个p元素，插入到id为test1元素的之后
$("<p>这是新增加的元素</p>").insertAfter("#test1"); 

二、删除节点操作

remove和detach

• remove：删除被选元素（包括元素的所有内容）
• detach：删除被选元素（但保留元素的所有数据和事件）

示例代码如下：

// 删除id为test的元素
$("#test").remove(); 

// 删除元素id为test1, 并保留所有数据和事件
$("#test1").detach(); 

empty

• empty：删除被选元素的所有子元素

示例代码如下：

// 清空id为test的元素内部的子元素
$("#test").empty(); 

三、修改节点操作

html

• html：设置或返回被选元素的内容（包括 HTML 标记）

示例代码如下：

// 修改id为test的元素的HTML内容
$("#test").html("<p>这是新的HTML内容</p>"); 

// 获取id为test1的元素的HTML内容
var htmlRes = $("#test1").html();

text

• text：设置或返回被选元素的文本内容

示例代码如下：

// 修改id为test的元素的文本内容
$("#test").text("这是新的文本内容"); 

// 获取id为test1的元素的文本内容
var textRes = $("#test1").text();

val

• val：设置或返回被选元素的值

示例代码如下：

// 修改id为test的元素的值
$("#test").val("这是新的值"); 

// 获取id为test1的元素的值
var valRes = $("#test1").val();

attr

• attr：设置或返回被选元素的属性值

示例代码如下：

// 修改id为test的元素的href属性为http://www.baidu.com
$("#test").attr("href", "http://www.baidu.com"); 

// 获取id为test1的元素的src属性的值
var attrRes = $("#test1").attr("src");

css

• css：设置或返回被选元素的样式属性的值

示例代码如下：

// 修改id为test的元素的背景颜色为红色
$("#test").css("background-color", "red"); 

// 获取id为test1的元素的字体颜色属性的值
var cssRes = $("#test1").css("color");

以上就是jQuery中常见的DOM节点操作方法。使用jQuery的节点操作方法可以极大提高网站开发效率，让操作更方便快捷。

四、其他节点操作方法

除了上述内容外，jQuery中还有大量其他的节点操作方法，如果需要了解更多可以参考jQuery官方文档或相关资料。

本文只是力求提供一个简单易懂的入门教程，让大家能够快速上手使用jQuery中的节点操作方法。