jquery 插入html

jQuery 插入 HTML 的方法

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

append()
将内容插入到选定元素的内部末尾。

$("#target").append("<p>New paragraph</p>");

prepend()
将内容插入到选定元素的内部开头。

$("#target").prepend("<p>New paragraph</p>");

after()
在选定元素之后插入内容。

$("#target").after("<div>New div after target</div>");

before()
在选定元素之前插入内容。

$("#target").before("<div>New div before target</div>");

html()
替换选定元素的内部 HTML。

$("#target").html("<p>Replaced content</p>");

appendTo() / prependTo()
将内容插入到目标元素的内部末尾或开头（与 append/prepend 方向相反）。

$("<p>New paragraph</p>").appendTo("#target");
$("<p>New paragraph</p>").prependTo("#target");

插入动态内容示例

可以结合变量或函数生成动态 HTML：

const dynamicContent = "<span>" + new Date().toLocaleTimeString() + "</span>";
$("#timeContainer").append(dynamicContent);

插入多个元素

可以一次插入多个元素或复杂结构：

const complexHTML = `
  <div class="item">
    <h3>Title</h3>
    <p>Description</p>
  </div>
`;
$("#container").append(complexHTML);

性能注意事项

• 频繁的 DOM 操作会影响性能，建议批量插入内容而非多次单次插入。
• 复杂的 HTML 字符串可以使用模板字符串（ES6）或多行字符串提高可读性。
• 使用文档片段（DocumentFragment）或字符串拼接优化大批量插入。