使用纯JavaScript向DOM中添加元素-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要使用JavaScript动态地向HTML页面中添加元素。虽然大多数人可能会选择使用jQuery等库来简化这个过程，但实际上只需要使用纯JavaScript也可以轻松地完成这项任务。

本文将介绍如何使用纯JavaScript将纯文本HTML添加到DOM中，并提供详细的示例代码和指导意义。

步骤1：创建一个新元素

在将HTML添加到DOM中之前，我们需要先创建要添加的新元素。为此，我们可以使用document.createElement()方法来创建一个新的HTML元素。

例如，我们可以使用以下代码创建一个新的段落元素：

var newParagraph = document.createElement('p');

接下来，我们需要将要添加的纯文本HTML添加到新元素中。为此，我们可以使用innerHTML属性或textContent属性来设置新元素的内容。

例如，我们可以使用以下代码将一段纯文本HTML添加到新创建的段落元素中：

newParagraph.innerHTML = '<strong>这是一段粗体文字</strong>';

或者，我们可以使用以下代码将同样的纯文本HTML添加到新元素的文本内容中：

newParagraph.textContent = '<strong>这是一段粗体文字</strong>';

最后，我们需要将新创建的元素添加到DOM中。为此，我们可以使用appendChild()方法将新元素添加到现有元素中。

例如，我们可以使用以下代码将新创建的段落元素添加到<body>元素中：

document.body.appendChild(newParagraph);

下面是一个完整示例代码，它演示了如何使用纯JavaScript将纯文本HTML添加到DOM中：

var newParagraph = document.createElement('p');
newParagraph.innerHTML = '<strong>这是一段粗体文字</strong>';
document.body.appendChild(newParagraph);

了解如何使用纯JavaScript将HTML添加到DOM中非常重要，因为它使您能够轻松地动态生成内容，从而增强了您的Web应用程序的交互性和可玩性。

此外，理解如何使用纯JavaScript执行此任务还可以帮助您更深入地了解JavaScript的工作原理，并帮助您更好地理解该语言的许多其他方面。

最后，在实际开发中，请记住始终测试您的代码并确保其能够正常运行。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/27329