js动态创建元素(两种方法)

以下是JS动态创建元素的攻略，包含两种方法和两个示例：

方法一：使用createElement()方法

使用createElement()方法可以在JS中动态创建HTML元素。以下是一个使用createElement()方法的示例：

// 创建一个新的div元素
var newDiv = document.createElement("div");

// 设置div元素的属性
newDiv.id = "myDiv";
newDiv.className = "box";

// 将div元素添加到文档中
document.body.appendChild(newDiv);

在这个示例中，我们使用createElement()方法创建了一个新的div元素，并设置了它的id和class属性。然后，我们使用appendChild()方法将这个新的div元素添加到文档中。

方法二：使用innerHTML属性

使用innerHTML可以在JS中动态创建HTML元素。以下是一个使用innerHTML属性的示例：

// 创建一个新的div元素
var newDiv = document.createElement("div");

// 设置div元素的属性
newDiv.id = "myDiv";
newDiv.className = "box";

// 设置div素的内容
newDiv.innerHTML = "<p>Hello World!</p>";

// 将div元素添加到文档中
document.body.appendChild(newDiv);

在这个示例中，我们使用createElement()方法创建了一个新的div元素设置了它的id和class属性。然后，我们使用innerHTML属性设置了div元素的内容。最后，我们使用appendChild()方法将这个新的div元素添加到文档中。

通过遵循上述步骤和示例，您可以使用JS动态创建HTML元素。请注意，在使用这些方法时确保您已经了解了HTML和JS的基础知识，并且您已经采取了必要的安全措施以保护您的网站和用户。