javascript元素动态创建实现方法


Posted in Javascript onMay 13, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
用JQuery 实现的自定义对话框
Mar 24 Javascript
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
Jan 12 Javascript
js中更短的 Array 类型转换
Oct 30 Javascript
基于JQuery制作可编辑的表格特效
Dec 23 Javascript
详解JavaScript ES6中的模板字符串
Jul 28 Javascript
Vue.js每天必学之指令系统与自定义指令
Sep 07 Javascript
JS自定义混合Mixin函数示例
Nov 26 Javascript
微信公众号 摇一摇周边功能开发
Dec 08 Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
Apr 13 Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
Jul 29 Javascript
微信小程序下拉框组件使用方法详解
Dec 28 Javascript
JS实现九宫格拼图游戏
Jun 28 Javascript
javascript实现模拟时钟的方法
May 13 #Javascript
javascript实现点击后变换按钮显示文字的方法
May 13 #Javascript
javascript实现十秒钟后注册按钮可点击的方法
May 13 #Javascript
javascript中clipboardData对象用法详解
May 13 #Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
May 13 #Javascript
浅谈jQuery中replace()方法
May 13 #Javascript
js实现仿Windows风格选项卡和按钮效果实例
May 13 #Javascript
You might like
PHP编程网上资源导航
2006/10/09 PHP
php使用正则过滤js脚本代码实例
2014/05/10 PHP
使用配置类定义Codeigniter全局变量
2014/06/12 PHP
仿服务器端脚本方式的JS模板实现方法
2007/04/27 Javascript
不安全的常用的js写法
2009/09/15 Javascript
Js 时间间隔计算的函数(间隔天数)
2011/11/15 Javascript
分享20个提升网站界面体验的jQuery插件
2014/12/15 Javascript
javascript定时器完整实例
2015/02/10 Javascript
让你一句话理解闭包(简单易懂)
2016/06/03 Javascript
fullpage.js全屏滚动插件使用实例
2016/09/06 Javascript
原生JavaScript实现todolist功能
2018/03/02 Javascript
vue iview实现动态路由和权限验证功能
2018/04/17 Javascript
学习Vue组件实例
2018/04/28 Javascript
vue cli 3.0 使用全过程解析
2018/06/14 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
2018/08/09 jQuery
示例vue 的keep-alive缓存功能的实现
2018/12/13 Javascript
微信小程序 调用远程接口 给全局数组赋值代码实例
2019/08/13 Javascript
vue中添加与删除关键字搜索功能
2019/10/12 Javascript
基于原生JS封装的Modal对话框插件的示例代码
2020/09/09 Javascript
基于Vue+Webpack拆分路由文件实现管理
2020/11/16 Javascript
[49:21]2018DOTA2亚洲邀请赛3月30日 小组赛B组 Effect VS iG
2018/03/31 DOTA
Python多进程编程技术实例分析
2014/09/16 Python
九步学会Python装饰器
2015/05/09 Python
Python3连接MySQL(pymysql)模拟转账实现代码
2016/05/24 Python
Python实现的井字棋(Tic Tac Toe)游戏示例
2018/01/31 Python
python实现SOM算法
2018/02/23 Python
Python3导入自定义模块的三种方法详解
2018/04/13 Python
Empty test suite.(PyCharm程序运行错误的解决方法)
2018/11/30 Python
Django web框架使用url path name详解
2019/04/29 Python
python使用ctypes调用扩展模块的实例方法
2020/01/28 Python
用canvas画心电图的示例代码
2018/09/10 HTML / CSS
小区文明倡议书
2014/05/16 职场文书
违纪检讨书
2015/01/27 职场文书
法人代表资格证明书
2015/06/18 职场文书
防震减灾主题班会
2015/08/14 职场文书
Spring中bean集合注入的方法详解
2022/07/07 Java/Android