jquery添加节点

jQuery 添加节点的方法

使用 jQuery 可以方便地动态添加 DOM 节点，以下是几种常用方法：

append() 方法

在选定元素的内部末尾插入内容：

$("#parent").append("<div>新节点</div>");

prepend() 方法

在选定元素的内部开头插入内容：

$("#parent").prepend("<div>新节点</div>");

after() 方法

在选定元素之后插入内容（同级）：

$("#target").after("<div>新节点</div>");

before() 方法

在选定元素之前插入内容（同级）：

$("#target").before("<div>新节点</div>");

html() 方法

替换选定元素内的所有内容：

$("#container").html("<div>全新内容</div>");

appendTo() 方法

将内容追加到指定元素中：

$("<div>新节点</div>").appendTo("#parent");

prependTo() 方法

将内容前置到指定元素中：

$("<div>新节点</div>").prependTo("#parent");

insertAfter() 方法

将内容插入到指定元素之后：

$("<div>新节点</div>").insertAfter("#target");

insertBefore() 方法

将内容插入到指定元素之前：

$("<div>新节点</div>").insertBefore("#target");

创建新节点

可以先用 jQuery 创建新元素对象，再进行插入：

var $newNode = $("<div>", {
    "class": "new-class",
    "text": "动态创建的节点",
    "css": {
        "color": "red"
    }
});
$("#parent").append($newNode);

注意事项

• 插入的内容可以是 HTML 字符串或 jQuery 对象
• 批量插入时建议使用文档片段(documentFragment)优化性能
• 动态添加的节点事件可能需要事件委托
• 插入前最好对内容进行必要的验证和转义