JavaScript动态创建DOM元素的方法与示例

作者:交互手记

时间:2026-10-29

浏览:631

本文介绍JavaScript中动态创建DOM元素的两种主要方式。首先指出document.write的局限性,随后重点讲解利用document.createElement创建指定标签对象,并通过appendChild方法将其添加到父元素下的标准流程。

文章目录

JavaScript动态创建DOM元素概述

本文通过具体实例解析JavaScript中动态创建元素的技术方案,供读者参考学习。

需要注意的是,document.write方法仅在页面加载阶段有效,无法在加载完成后动态生成内容。

标准做法是调用document的createElement方法生成指定标签的DOM节点,随后利用元素的appendChild方法将该新元素插入到目标父元素内部。

具体实现代码如下所示:

动态添加按钮的完整示例


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Dom动态创建元素</title>
 <script type="text/javascript">
 function CreateButton() {
  var div = document.getElementById("divMain");
  var myButton = document.createElement("input");
  myButton.type = "button";
  myButton.value = "我是动态添加的";
  //myButton.id="btn"; 注意:如果设置id的话要避免重复
  div.appendChild(myButton); //添加到div上
 }
 </script>
</head>
<body>
 <div id="divMain"></div>
 <input type="button" value="添加元素" onclick="CreateButton()" />
</body>
</html>

希望上述内容能对您的JavaScript编程实践提供有益帮助。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章