在前端开发中，我们常常需要通过代码向页面中插入新的 HTML 元素。这些元素可能是按钮、表单、图像等等，它们可以为用户提供更好的交互体验和信息展示。本文将介绍如何使用 JavaScript 动态创建 HTML 元素，并演示一些实用的示例。
使用 createElement 方法创建元素
在 JavaScript 中，我们可以使用 document.createElement(tagName) 方法来创建一个新的 HTML 元素。其中 tagName 是要创建的元素的标签名，例如 div、p、img 等等。下面是一个简单的示例：
---- ---------------------
----- --------- - ------------------------------------- ----- ------ - --------------------------------- ------------------ - ------ ---- ------------------------------
在上述代码中，我们首先获取了 ID 为 container 的元素，然后使用 createElement 方法创建了一个新的 button 元素，并设置了其文本内容为 Click me。最后，我们使用 appendChild 方法将该元素添加到 container 元素中。
设置元素属性和样式
除了设置元素的文本内容之外，我们还可以使用 JavaScript 来设置其属性和样式。例如，我们可以为元素设置 class、id、src、href 等属性，以及设置其背景色、边框样式、字体颜色等样式。下面是一个示例：
----- --- - ------------------------------ ------- - -------------------------------- ------- - -- --------- ------- --------------- - -------- ------------------- - -------
在上述代码中，我们创建了一个 img 元素，并设置了其 src 和 alt 属性，以及宽度和上边距样式。
使用 innerHTML 插入 HTML 代码
除了动态创建 HTML 元素之外，我们还可以使用 innerHTML 属性来插入 HTML 代码。例如，下面的示例将在页面中插入一个表格元素，并设置其中的单元格内容：
---- ---------------------
----- --------- - -------------------------------------
------------------- - -
-------
----
--------------
---------------
---------------
-----
--------
--在上述代码中，我们使用 innerHTML 属性为 container 元素插入了一个包含三个单元格的表格元素。
需要注意的是，使用 innerHTML 可能存在 XSS 攻击的风险。因此，在插入用户提供的内容时，应该先进行适当的转义和过滤。
使用 jQuery 简化操作
如果你熟悉 jQuery，那么可以使用其提供的便捷方法来简化操作。例如，下面的示例使用 jQuery 来创建一个新的 button 元素，并将其添加到页面中：
---- ---------------------
----- ------ - ------------------------- ----- -------------------------------
在上述代码中，我们使用了 $ 函数来创建一个新的 button 元素，并使用 text 方法设置其文本内容。然后，我们使用 append 方法将该元素添加到 ID 为 container 的元素中。
结语
本文介绍了如何使用 JavaScript 动态创建 HTML 元素，并演示了一些实用的示例。希望这些知识对你在前端开发中有所帮助！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/12303