当前位置：首页 > news >正文

jQuery DOM节点操作详解

news 2025/8/6 7:01:30

本文详细介绍常见的DOM节点操作方法，包括创建、插入、删除、替换和复制等操作。

本文目录

- - - 1. 创建新节点
    - 2. 插入节点
    - 3. 删除节点
    - 4. 替换节点
    - 5. 复制节点
    - 6. 包裹节点
    - 7. DOM操作的链式调用
    - 8. 操作DOM节点的属性和内容

1. 创建新节点

使用HTML字符串或jQuery对象创建新元素

// 创建文本节点
const $textNode = $("<p>这是一个新段落</p>");// 创建带属性的元素
const $link = $("<a>", {href: "https://api.com",text: "访问api网站",class: "external-link"
});// 创建包含子元素的复杂结构
const $container = $("<div>", { class: "container" }).append($("<h2>标题</h2>"),$("<p>内容段落</p>"),$("<ul>").append($("<li>项目1</li>"),$("<li>项目2</li>"))
);

2. 插入节点

将元素插入到DOM中的指定位置

// 内部插入，作为子元素
$("div").append("<p>追加到末尾</p>");       // 末尾追加
$("div").prepend("<p>插入到开头</p>");     // 开头插入// 外部插入，作为兄弟元素
$("p").after("<div>在后面插入</div>");     // 后面插入
$("p").before("<span>在前面插入</span>");  // 前面插入// 链式操作示例
$("<button>点击</button>").appendTo("div")                         // 追加到div.click(function() { alert("被点击了"); });// 插入已存在的元素，会移动而非复制
$("#element").appendTo("#target");        // 将#element移动到#target内部

3. 删除节点

从DOM中移除元素

// 删除元素及其子元素
$("p").remove();                          // 删除所有p元素// 删除元素但保留数据和事件
$("div").detach();                        // 可重新插入DOM// 清空元素内容，保留元素本身
$("ul").empty();                          // 移除所有li子元素

4. 替换节点

用新元素替换现有元素

// 替换单个元素
$("p").replaceWith("<h3>替换为标题</h3>");  // 替换所有p元素// 使用jQuery对象替换
const $newElement = $("<div>新内容</div>");
$("span").replaceWith($newElement);// 自替换，修改后重新插入
$("div").each(function() {$(this).replaceWith("<div class='new'>" + $(this).text() + "</div>");
});

5. 复制节点

使用 .clone() 方法复制元素

// 浅复制，不包含事件
$("li").clone().appendTo("ul");           // 复制所有li并追加到ul// 深复制，包含事件和数据
$("button").clone(true).insertAfter("button");  // 复制按钮及其事件// 复制并修改内容
$("p").clone().text("复制后的新文本").appendTo("div");

6. 包裹节点

用其他元素包裹DOM元素

// 为每个元素单独包裹
$("p").wrap("<div class='wrapper'></div>");  // 每个p被单独包裹// 将所有元素包裹在一起
$("p").wrapAll("<div class='container'></div>");  // 所有p被一个div包裹// 包裹元素内容
$("h1").wrapInner("<span class='highlight'></span>");  // 包裹h1的文本

7. DOM操作的链式调用

jQuery的方法通常返回自身，支持链式调用

$("<div>").addClass("box").html("<p>内容</p>").css("background-color", "#f0f0f0").appendTo("body").click(function() { $(this).fadeOut(); });

8. 操作DOM节点的属性和内容

结合属性和内容操作

// 设置属性
$("img").attr("src", "image.jpg");// 获取和设置内容
const text = $("p").text();               // 获取文本内容
$("div").html("<strong>新HTML</strong>");  // 设置HTML内容// 修改表单值
$("input").val("新值");