DOM操作创建新节点的方法

来源：互联网 2023-03-16 23:56:49 版权归原作者所有，如有侵权，请联系我们

要创建新节点（元素），我们需要做的第一件事是确定我们将要做什么，在这篇经验的例子中，我将创建如下图的标记：一个包含两个span元素的div，我已经在这几个元素中包含了类（class）和id的属性。这里将展示三种不同的方法，创建新DOM节点（元素），现在让我们开始吧。

DOM操作创建新节点的方法

工具/原料

javascript
浏览器
html

方法：使用createElement和createTextNode

语法。

DOM操作创建新节点的方法

第一种方法是使用document.createElement，包括两个参数：一个标记类型的字符串和一个属性。一旦你有了一个元素，你还需要使用createTextNode在元素内添加文本。最后，我们需要将它们放在一起，并添加到浏览器DOM中。以下是使用这两种方法创建DOM结构的代码。

DOM操作创建新节点的方法

2此文章未经许可获取自百度经验

方法2：使用innerHTML

接下来我们可以使用innerHTML方法在div元素内部创建DOM，并且让浏览器为您完成工作。现在让我们创建一个元素，然后设置它的innerHTML并返回它的子元素。

DOM操作创建新节点的方法

在这段代码中，我们创建了一个div>元素，为我们所有的DOM元素设置它的html，然后获取我们创建的div>（这是我们的容器）中的第一个元素，最后将其添加到DOM中。

方法3：使用DOMParser

我将告诉你的最后一个方法是使用DOMParser对象，用它创建一个全新的DOM树，然后我们可以从中获取我们的元素。总的来说，这与innerHTML相似。首先，创建一个解析器的实例。然后调用parseFromString方法，该方法有两个参数：要解析的字符串以及浏览器如何解析（您可以使用DOMParser来解析除HTML之外的其他内容）。以下是创建DOM元素的代码。

DOM操作创建新节点的方法