在前端开发中，DOM（Document Object Model）节点操作是必不可少的部分之一。本文将重点讨论JavaScript中如何进行DOM节点操作，具体涉及新建和删除HTML元素。
新建HTML元素
通过JavaScript代码，我们可以轻松地在HTML文档中创建新的元素并添加到指定位置。
createElement()方法
首先，我们需要使用document.createElement()方法来创建一个新的HTML元素。该方法接受一个参数，即要创建的元素类型，例如“div”、“p”、“ul”等。
const newDiv = document.createElement("div");createTextNode()方法
接下来，我们可以使用document.createTextNode()方法来创建一个文本节点。该方法接受一个字符串作为参数，并将其转换为文本节点。
const textNode = document.createTextNode("This is a new paragraph.");appendChild()方法
现在，我们已经准备好了新的HTML元素和文本节点。接下来，我们需要使用appendChild()方法将文本节点添加到新的HTML元素中。然后，我们可以再次使用appendChild()方法将新的HTML元素添加到现有的HTML文档中。
newDiv.appendChild(textNode); document.body.appendChild(newDiv);
最终，我们将得到一个包含文本节点的新<div>元素，并将其添加到文档的<body>元素中。完整代码示例如下：
const newDiv = document.createElement("div");
const textNode = document.createTextNode("This is a new paragraph.");
newDiv.appendChild(textNode);
document.body.appendChild(newDiv);删除HTML元素
除了创建新的HTML元素，我们还可以使用JavaScript代码删除现有的HTML元素。下面是两种常用的方法。
removeChild()方法
要删除一个现有的HTML元素，我们需要首先找到它。我们可以使用document.getElementById()方法或其他选择器方法来找到我们想要删除的元素。然后，我们可以使用removeChild()方法将该元素从其父元素中删除。
const element = document.getElementById("myElement");
element.parentNode.removeChild(element);在上述示例中，我们首先使用getElementById()方法查找ID为“myElement”的元素，然后使用parentNode属性获取其父元素。最后，我们使用removeChild()方法将该元素从其父元素中删除。
remove()方法
另一种删除HTML元素的方法是使用元素自身的remove()方法。这个方法会直接将元素从HTML文档中删除。
const element = document.getElementById("myElement");
element.remove();在这个示例中，我们只需要使用getElementById()方法找到要删除的元素，并调用它的remove()方法即可。
总结
本文中，我们讨论了JavaScript中如何进行DOM节点操作，包括新建和删除HTML元素。我们学习了如何使用createElement()、createTextNode()和appendChild()方法来创建新的HTML元素，并学习了如何使用removeChild()和remove()方法删除现有的HTML元素。这些技术对于前端开发和网页设计非常重要，可以帮助我们更好地控制HTML文档的结构和内容。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/1009