jquery 添加

jQuery 添加元素的方法

动态添加 HTML 内容

使用 append()、prepend()、after() 或 before() 方法可以在 DOM 中插入新元素。

// 在元素内部末尾添加内容  
$("#target").append("<p>New paragraph</p>");  

// 在元素内部开头添加内容  
$("#target").prepend("<p>New paragraph</p>");  

// 在元素之后添加内容  
$("#target").after("<div>New div</div>");  

// 在元素之前添加内容  
$("#target").before("<span>New span</span>");  

创建新元素并插入

可以先用 $() 创建新元素，再插入到 DOM 中。

var newElement = $("<div>", {  
  class: "box",  
  text: "This is a new box"  
});  

// 插入到目标元素内  
$("#container").append(newElement);  

插入 HTML 字符串

直接插入 HTML 字符串，jQuery 会自动解析并插入到指定位置。

$("#list").append("<li>Item 1</li><li>Item 2</li>");  

插入现有元素

如果元素已存在于 DOM 中，使用插入方法会移动该元素而非复制。

var $existingElement = $("#existing-item");  
$("#new-container").append($existingElement);  

链式操作

jQuery 支持链式调用，可以连续插入多个元素。

$("#wrapper")  
  .append("<div>First</div>")  
  .append("<div>Second</div>");  

这些方法适用于动态修改页面内容，支持灵活的元素插入方式。