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