在前端开发中，我们经常需要创建 HTML 元素来动态地修改页面内容。在 jQuery 中，有多种方法可以创建新的 DOM 元素。
使用 $() 函数
jQuery 的 $() 函数接受一个字符串参数，该字符串代表要创建的元素的标签名称。例如，要创建一个新的 div 元素，可以使用以下代码：
var newDiv = $("<div></div>");如果要添加其他属性或内容，可以将它们作为字符串参数传递给 $() 函数。例如，以下代码会创建一个带有文本和类名的 div 元素：
var newDiv = $("<div class='my-class'>Hello, world!</div>");使用 .append() 方法
一旦创建了新的 DOM 元素，可以使用 jQuery 的 .append() 方法将其添加到现有元素中。例如，以下代码会创建一个新的 li 元素，并将其添加到 ul 元素中：
var newLi = $("<li>New list item</li>");
$("ul").append(newLi);使用 .appendTo() 方法
.appendTo() 方法与 .append() 方法类似，但是它反转了元素的顺序。具体来说，它将新元素附加到指定元素的末尾，而不是将指定元素附加到新元素的末尾。例如，以下代码会创建一个新的 li 元素，并将其添加到 ul 元素中：
$("<li>New list item</li>").appendTo("ul");使用 .html() 方法
如果要向现有元素中添加更多 HTML 内容，可以使用 jQuery 的 .html() 方法。该方法接受一个字符串参数，该字符串包含要添加到元素中的 HTML 代码。例如，以下代码会将新的 p 元素添加到 div 元素中：
$("div").html("<p>New paragraph</p>");示例代码
下面是一个使用 jQuery 创建 DOM 元素的完整示例：
-- -------------------- ---- ------- --------- ----- ------ ------ ---------------- --- -------- ---- -------------- -------- ----------------------------------------------------------- --------- ------------------------------ - ------ ------ - ------- ----------------------- --------------- ---------------------------- ------ ----- - ---------- ---- ------------ ------------------------- ------------- ---- --------------------------- ------------------------ ---------------- ----- ---------- ------- ------ ----- ---------- ---- ------ ---------- ---- ------ ---------- ---- ------ ------ -------------- ------------- ------- -------
在此示例中，创建了一个新的 div 元素和两个新的 li 元素，并将它们添加到文档中。还添加了一段新的 HTML 内容到 div 元素中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30192