在前端开发中，我们经常需要通过JavaScript动态创建并添加HTML元素到页面上，这种操作称为“动态创建并追加DOM节点”。本文将介绍如何使用JavaScript来实现该功能，包括具体的方法、技巧以及相关的示例代码。
createElement方法
在JavaScript中，我们可以使用document.createElement()方法来创建一个新的 HTML 元素。该方法接受一个参数，即要创建的元素标签名称。例如，要创建一个<div>元素，可以使用以下代码：
const newDiv = document.createElement('div');这将创建一个名为 newDiv 的<div>元素，并将其存储在变量中供后续使用。
appendChild方法
一旦我们创建了一个 DOM 元素，就可以使用 appendChild() 方法将其添加到页面中的其他元素中。该方法接受一个参数，即要添加的子元素。例如，要将一个新的<div>元素添加到页面的<body>元素中，可以使用以下代码：
document.body.appendChild(newDiv);
当然，我们也可以将一个 DOM 元素添加到另一个元素中，例如：
const parentElement = document.querySelector('#parent-element');
parentElement.appendChild(newDiv);这将把 newDiv 添加到id属性为 parent-element 的元素中。
示例代码
下面是一个完整的示例，演示如何创建一个新的<div>元素，并将其添加到页面上：
-- -------------------- ---- -------
--------- -----
------
------
--------------------------
-------
------
--------------------
------- -------------------------------------
---- --------------------------
--------
----- ---------------- - ----------------------------------------------
----- ------------- - ------------------------------------------
------------------------------------------ -- -- -
-- ------ --- --
----- ------ - ------------------------------
------------------ - ------- --- ----
-- -----------
----------------------------------
---
---------
-------
-------在以上示例中，我们首先定义了一个包含一个按钮和一个空<div>元素的 HTML 页面。然后，我们使用 JavaScript 获取对按钮和父元素的引用，并添加一个单击事件监听器来创建并添加新的 <div> 元素。
总结
通过本文，我们学习了如何使用JavaScript动态创建并追加 DOM 节点。具体而言，我们介绍了 createElement() 和 appendChild() 方法以及相关的示例代码。希望本文能够对您有所帮助，并启发您更多的想法和技巧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/10694
