使用 JavaScript 添加/删除 div 中的 HTML 元素

阅读时长 3 分钟读完

在前端开发中,经常需要动态地添加或删除 HTML 元素。本文将介绍如何使用 JavaScript 在一个 <div> 元素中添加或删除 HTML。

创建一个用于操作的 <div> 元素

首先,我们需要创建一个 <div> 元素,并为它指定一个唯一的 ID。例如:

使用 JavaScript 添加 HTML 元素

要向 <div> 元素中添加 HTML,我们可以使用 innerHTML 属性。该属性允许读取或设置元素的 HTML 内容。

以下示例演示了如何使用 innerHTML 属性将一些 HTML 添加到上面创建的 <div> 元素中:

在此示例中,我们使用 document.getElementById() 方法获取具有指定 ID 的元素。然后,我们将所需的 HTML 代码分配给 innerHTML 属性。在这种情况下,我们将一个包含“Hello, world!”的 <p> 元素添加到 <div> 元素中。

使用 JavaScript 删除 HTML 元素

删除元素时,我们可以使用 removeChild() 方法。该方法接受需要删除的子节点作为参数,并从父节点中删除该节点。

以下示例演示了如何使用 removeChild() 方法从上面创建的 <div> 元素中删除子元素:

在此示例中,我们首先使用 querySelector() 方法获取第一个 <p> 元素的引用。然后,我们将该元素传递给 removeChild() 方法以从 <div> 元素中删除它。

结论

使用 JavaScript 在 <div> 元素中添加或删除 HTML 元素是一项基本任务,在前端开发中非常有用。使用 innerHTML 属性可以轻松地向 <div> 元素中添加 HTML 元素,而使用 removeChild() 方法可以轻松地从中删除元素。

然而,需要注意的是,动态操作 DOM 可能会对性能带来负面影响,因此应该尽可能减少这样的操作。

希望本文对您了解如何使用 JavaScript 操作 HTML 元素提供了帮助!

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/25636

纠错
反馈