JavaScript DOM节点操作实例小结

在前端开发中，DOM（Document Object Model）节点操作是必不可少的部分之一。本文将重点讨论JavaScript中如何进行DOM节点操作，具体涉及新建和删除HTML元素。

新建HTML元素

通过JavaScript代码，我们可以轻松地在HTML文档中创建新的元素并添加到指定位置。

createElement()方法

首先，我们需要使用document.createElement()方法来创建一个新的HTML元素。该方法接受一个参数，即要创建的元素类型，例如“div”、“p”、“ul”等。

----- ------ - ------------------------------

createTextNode()方法

接下来，我们可以使用document.createTextNode()方法来创建一个文本节点。该方法接受一个字符串作为参数，并将其转换为文本节点。

----- -------- - ----------------------------- -- - --- -------------

appendChild()方法

现在，我们已经准备好了新的HTML元素和文本节点。接下来，我们需要使用appendChild()方法将文本节点添加到新的HTML元素中。然后，我们可以再次使用appendChild()方法将新的HTML元素添加到现有的HTML文档中。

-----------------------------
----------------------------------

最终，我们将得到一个包含文本节点的新<div>元素，并将其添加到文档的<body>元素中。完整代码示例如下：

----- ------ - ------------------------------
----- -------- - ----------------------------- -- - --- -------------

-----------------------------
----------------------------------

删除HTML元素

除了创建新的HTML元素，我们还可以使用JavaScript代码删除现有的HTML元素。下面是两种常用的方法。

removeChild()方法

要删除一个现有的HTML元素，我们需要首先找到它。我们可以使用document.getElementById()方法或其他选择器方法来找到我们想要删除的元素。然后，我们可以使用removeChild()方法将该元素从其父元素中删除。

----- ------- - -------------------------------------
----------------------------------------

在上述示例中，我们首先使用getElementById()方法查找ID为“myElement”的元素，然后使用parentNode属性获取其父元素。最后，我们使用removeChild()方法将该元素从其父元素中删除。

remove()方法

另一种删除HTML元素的方法是使用元素自身的remove()方法。这个方法会直接将元素从HTML文档中删除。

----- ------- - -------------------------------------
-----------------

在这个示例中，我们只需要使用getElementById()方法找到要删除的元素，并调用它的remove()方法即可。

总结

本文中，我们讨论了JavaScript中如何进行DOM节点操作，包括新建和删除HTML元素。我们学习了如何使用createElement()、createTextNode()和appendChild()方法来创建新的HTML元素，并学习了如何使用removeChild()和remove()方法删除现有的HTML元素。这些技术对于前端开发和网页设计非常重要，可以帮助我们更好地控制HTML文档的结构和内容。

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

JavaScript DOM节点操作实例小结(新建,删除HTML元素)