JavaScript 从 innerHTML 创建节点

在JavaScript中，我们可以通过innerHTML属性轻松地创建HTML元素。我们可以指定要添加到元素中的HTML代码，然后将其分配给innerHTML属性。但是，这种方法有一个缺点，即它可能会被用来注入恶意脚本。因此，最好使用createElement()方法和appendChild()方法来创建新元素并将其添加到DOM中。

创建新节点

要创建一个新元素，我们可以使用createElement()方法，它会创建一个指定名称的新元素。例如，要创建一个新的段落元素，我们可以使用以下代码：

var para = document.createElement("p");

添加属性

我们可以使用setAttribute()方法为元素设置属性。例如，要将段落元素的class属性设置为"myClass"，我们可以使用以下代码：

para.setAttribute("class", "myClass");

添加文本

要将文本添加到元素中，我们可以使用createTextNode()方法创建一个文本节点，并使用appendChild()方法将其添加到元素中。例如，要在段落元素中添加文本"Hello World!"，我们可以使用以下代码：

var text = document.createTextNode("Hello World!");
para.appendChild(text);

将元素添加到DOM中

最后，我们需要使用appendChild()方法将元素添加到DOM中。例如，要将段落元素添加到body元素中，我们可以使用以下代码：

document.body.appendChild(para);

总结

使用innerHTML创建元素可能会带来安全风险，因此最好使用createElement()方法和appendChild()方法来创建和添加新元素。这不仅更安全，而且更有控制性，使我们能够更轻松地更改元素的属性和内容。