在前端开发中，经常需要动态地添加或删除 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