jquery插入元素

jQuery 插入元素方法

jQuery 提供了多种方法来动态插入元素到 DOM 中。以下是常用的几种方式：

在元素内部插入

append()
将内容插入到目标元素的末尾（仍位于元素内部）。

$("#target").append("<div>新内容</div>");

prepend()
将内容插入到目标元素的开头（仍位于元素内部）。

$("#target").prepend("<div>新内容</div>");

在元素外部插入

after()
在目标元素之后插入内容（同级节点）。

$("#target").after("<div>新内容</div>");

before()
在目标元素之前插入内容（同级节点）。

$("#target").before("<div>新内容</div>");

插入已有元素

上述方法也可用于移动已存在的 DOM 元素：

var $existingElement = $("#existing");
$("#target").append($existingElement); // 移动元素到目标内部末尾

链式操作
jQuery 方法支持链式调用：

$("#target")
  .append("<div>第一部分</div>")
  .append("<div>第二部分</div>");

注意事项

• 插入的 HTML 字符串需确保闭合标签正确。
• 频繁操作 DOM 可能影响性能，建议批量操作或使用文档片段优化。
• jQuery 3.0+ 版本对动态插入的脚本标签会默认执行（早期版本需手动处理）。