// 基本语法
$(selector).append(content);

// 示例1：追加文本
$("#container").append("<p>这是新追加的段落</p>");

// 示例2：追加已存在的元素
var newDiv = $("<div>", {
  class: "new-box",
  text: "动态创建的div"
});
$("#container").append(newDiv);

var items = ["苹果", "香蕉", "橙子"];
$.each(items, function(index, value) {
  $("<li>").text(value).appendTo("#fruit-list");
});

$("#container").append(function() {
  return $("<div>").text("基于回调动态生成的内容");
});

$.get("/api/data", function(response) {
  $.each(response.items, function(i, item) {
    $("<div>")
      .addClass("item")
      .html(`<h3>${item.title}</h3><p>${item.description}</p>`)
      .appendTo("#results");
  });
});

// 错误方式（对新追加元素无效）
$(".dynamic-btn").click(function() { ... });

// 正确方式（事件委托）
$(document).on("click", ".dynamic-btn", function() { ... });

// 低效方式
for (var i = 0; i < 1000; i++) {
  $("#list").append("<li>Item " + i + "</li>");
}

// 高效方式
var fragment = document.createDocumentFragment();
for (var i = 0; i < 1000; i++) {
  var li = document.createElement("li");
  li.textContent = "Item " + i;
  fragment.appendChild(li);
}
$("#list").append(fragment);

$("#add-btn").click(function() {
  // 方法1：先清空
  $("#container").empty().append(newContent);
  
  // 方法2：检查是否已存在
  if (!$("#container").find(".new-content").length) {
    $("#container").append(newContent);
  }
});