本文介绍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编程实践提供有益帮助。