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