博客

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

  • Post category:other

JS动态创建元素

在网页设计中，我们经常需要使用JS动态创建元素来实现一些交互效果。以下是JS动态创建元素的完整攻略。

步骤

以下是JS动态创建元素的步骤：

  1. 创建元素。

  2. 设置元素属性。

  3. 添加元素到DOM树中。

示例

以下是两个示例，演示如何使用JS动态创建元素。

示例1：使用createElement方法创建元素

<!DOCTYPE html>
<html>
<head>
  <title>JS动态创建元素示例</title>
</head>
<body>
  <script>
    // 创建元素
    var div = document.createElement("div");

    // 设置元素属性
    div.style.width = "100px";
    div.style.height = "100px";
    div.style.backgroundColor = "red";

    // 添加元素到DOM树中
    document.body.appendChild(div);
  </script>
</body>
</html>

以上示例中，我们使用createElement方法创建了一个div元素，并设置了其宽度、高度和背景颜色，最后将其添加到了DOM树中。

示例2：使用innerHTML方法创建元素

<!DOCTYPE html>
<html>
<head>
  <title>JS动态创建元素示例</title>
</head>
<body>
  <div id="container"></div>
  <script>
    // 创建元素
    var div = "<div style='width: 100px; height: 100px; background-color: red;'></div>";

    // 添加元素到DOM树中
    document.getElementById("container").innerHTML = div;
  </script>
</body>
</html>

以上示例中，我们使用innerHTML方法创建了一个div元素，并设置了其宽度、高度和背景颜色，最后将其添加到了DOM树中。

结论

通过以上步骤和示例，我们了解了如何使用JS动态创建元素。在实际应用中，我们可以使用createElement或innerHTML方法创建元素，并设置其属性，最后将其添加到DOM树中，以实现一些交互效果。

Tags: