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 相关文章推荐
语义化 H1 标签
Jan 14 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
Oct 23 Javascript
jQuery控制div实现随滚动条滚动效果
Jun 07 Javascript
微信小程序 生命周期详解
Oct 12 Javascript
BootStrap 可编辑表Table格
Nov 24 Javascript
jquery实现弹窗功能(窗口居中显示)
Feb 27 Javascript
详解Vue使用 vue-cli 搭建项目
Apr 20 Javascript
源码分析Vue.js的监听实现教程
Apr 23 Javascript
angular4中引入echarts的方法示例
Jan 29 Javascript
解决layui富文本编辑器图片上传无法回显的问题
Sep 18 Javascript
js 计数排序的实现示例(升级版)
Jan 12 Javascript
用React Native制作一个简单的游戏引擎
May 27 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中反射的应用
2013/06/18 PHP
php教程之魔术方法的使用示例(php魔术函数)
2014/02/12 PHP
PHP5.5迭代生成器用法实例详解
2016/03/16 PHP
PHP使用Redis替代文件存储Session的方法
2017/02/15 PHP
php无限级评论嵌套实现代码
2018/04/18 PHP
javascript编程起步(第六课)
2007/02/27 Javascript
js加解密 脚本解密
2008/02/22 Javascript
纯JavaScript实现的完美渐变弹出层效果代码
2010/04/02 Javascript
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
2012/02/10 Javascript
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
2013/08/13 Javascript
微信小程序 图片加载(本地,网路)实例详解
2017/03/10 Javascript
anime.js 实现带有描边动画效果的复选框(推荐)
2017/12/24 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
2018/08/08 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
2019/03/16 Javascript
vue路由--网站导航功能详解
2019/03/29 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
2019/10/11 Javascript
jQuery实现弹出层效果
2019/12/10 jQuery
python之wxPython菜单使用详解
2014/09/28 Python
微信跳一跳python自动代码解读1.0
2018/01/12 Python
python切片的步进、添加、连接简单操作示例
2019/07/11 Python
Python3多线程版TCP端口扫描器
2019/08/31 Python
python 监测内存和cpu的使用率实例
2019/11/28 Python
Python迷宫生成和迷宫破解算法实例
2019/12/24 Python
pytorch模型预测结果与ndarray互转方式
2020/01/15 Python
美国定制钻石订婚戒指:Ritani
2017/12/08 全球购物
欧洲最大的滑雪假期供应商之一:Sunweb Holidays
2018/01/06 全球购物
毕业生个人的求职信范文
2013/12/03 职场文书
入党积极分子介绍信
2014/01/17 职场文书
工厂保安员岗位职责
2014/01/31 职场文书
办理房产证委托书
2014/09/18 职场文书
2014年计划生育协会工作总结
2014/11/14 职场文书
升职自我推荐信范文
2015/03/25 职场文书
试用期解除劳动合同通知书
2015/04/16 职场文书
2015年小学教导处工作总结
2015/05/26 职场文书
雨雪天气温馨提示
2015/07/15 职场文书
《角的初步认识》教学反思
2016/02/17 职场文书