javascript元素动态创建实现方法
更新时间：2015年05月13日 11:47:09 作者：永远爱好写程序
这篇文章主要介绍了javascript元素动态创建实现方法,涉及javascript操作元素的相关技巧,需要的朋友可以参考下
本文实例讲述了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程序设计有所帮助。
相关文章
为了使抽奖程序能够无需配置平台直接可以在任何一台机器上运行，开发工具和编译运行工具也能够尽可能简单（诸如text文本即可编辑，window系统自带的浏览器即可编译运行的情况），决定尝试使用javascript来做2016-01-01
这篇文章主要介绍了js获取当前时间，一种是获取昨天、今天、明天的准确时间，一个精确到时分秒,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
这篇文章主要介绍了fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法,分析了问题出现的原因及相关配置文件设置技巧,需要的朋友可以参考下2017-03-03
这篇文章主要介绍了JS继承定义与使用方法,结合完整实例形式分析了JavaScript继承的基本定义、用法及操作注意事项,需要的朋友可以参考下2020-02-02
这篇文章主要为大家详细介绍了原生JS实现轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-10-10
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
这篇文章主要为大家详细解析了Bootstrap时间选择器datetimepicker和daterangepicker使用实例,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
JavaScript 实现类似Express的中间件系统(实例详解)
在 Express 中可以给一个请求设置若干个中间件，在处理响应时会按顺序执行这些中间件，正在执行的中间件可以控制是否执行下一个中间件，这篇文章主要介绍了JavaScript 实现类似Express的中间件系统的相关资料,需要的朋友可以参考下2023-02-02
ionic2打包android时gradle无法下载的解决方法
这篇文章主要为大家详细介绍了ionic2打包android时gradle无法下载的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
Bootstrap每天必学之警告框插件,使用警告框（Alert）插件，您可以向所有的警告框消息添加可取消（dismiss）功能，感兴趣的小伙伴们可以参考一下2016-04-04
这篇文章主要介绍了javascript中的String对象知识点，对String对象的基本使用方法，以及各种方法进行整理，感兴趣的小伙伴们可以参考一下2015-11-11
最新评论