JavaScript动态创建DOM元素的三种常用方法解析

作者：小圆点

时间：2026-10-30

本文总结了JavaScript中动态创建DOM元素的三种主要方法：document.write、innerHTML以及document.createElement。通过对比分析，指出document.write会冲刷页面内容且影响布局，实际应用中较少使用；innerHTML适合批量添加标签；而createElement则适用于少量元素的精确创建。文章结合具体代码示例，帮助开发者根据实际需求选择合适的方法。

文章目录

使用 document.write() 动态写入元素

在JavaScript开发中，动态创建DOM元素是常见需求。第一种方法是通过 document.write() 实现。

具体示例为向页面中输出一个 li 标签。


<pre class="html" name="code"><span style="font-size:12px;"><script>
  document.write("<li>123</li>");
</script></span>

使用该方法后，body标签中会插入相应的内容。然而，这种方法几乎不被推荐使用，因为它会影响页面的正常布局，甚至可能将页面原有的内容冲刷掉，导致只显示输出的内容。

利用 innerHTML 批量插入内容

第二种动态创建元素的方法是使用 innerHTML。


<span style="font-size:12px;"><body>
<div id="box"></div>
<script>
  var box = document.getElementById("box");
  box.innerHTML = "<p>这是p标签</p>";
</script>
</body></span>

示例显示，在div标签中插入一个p标签，并在页面上输出“这是标签”。当需要添加的标签数量较多时，使用这种方式较为便捷。

通过 createElement() 精确创建节点

第三种方法是利用 document.createElement() 来创建元素。


<span style="font-size:12px;"><body>
<div id="box"></div>
<script>
  var box = document.getElementById("box");
  var li = document.createElement("li"); //创建一个li标签
  li.innerHTML = "123";  //给li标签赋值
  box.appendChild(li);  //将创建好的li标签追加到box标签中
</script>
</body></span>

示例表明，在div标签下面可以创建一个li标签。当需要动态创建的标签数量较少时，推荐使用这种方式，因为它能更精确地控制元素的创建和插入。

使用 document.write() 动态写入元素