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 相关文章推荐
离开页面时检测表单元素是否被修改,提示保存的js代码
Aug 25 Javascript
JQuery.get提交页面不跳转的解决方法
Jan 13 Javascript
关于JavaScript的变量的数据类型的判断方法
Aug 14 Javascript
JavaScript的ExtJS框架中表格的编写教程
May 21 Javascript
JS+CSS3实现超炫的散列画廊特效
Jul 16 Javascript
vue插件tab选项卡使用小结
Oct 27 Javascript
node.js中express-session配置项详解
May 31 Javascript
Node.js学习教程之HTTP/2服务器推送【译】
Oct 31 Javascript
vue项目中使用百度地图的方法
Jun 08 Javascript
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
详解使用JWT实现单点登录(完全跨域方案)
Aug 02 Javascript
vue-router路由懒加载及实现的3种方式
Feb 28 Vue.js
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实现获取及设置用户访问页面语言类
2014/09/24 PHP
typecho插件编写教程(二):写一个新插件
2015/05/28 PHP
PHP中TP5 上传文件的实例详解
2017/07/31 PHP
Javascript学习笔记2 函数
2010/01/11 Javascript
javascript循环变量注册dom事件 之强大的闭包
2010/09/08 Javascript
Js组件的一些写法
2010/09/10 Javascript
js截取小数点后几位的写法
2013/11/14 Javascript
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
2013/11/25 Javascript
js substring从右边获取指定长度字符串(示例代码)
2013/12/23 Javascript
JS 弹出层 定位至屏幕居中示例
2014/05/21 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
2016/01/10 Javascript
PHP捕捉异常中断的方法
2016/10/24 Javascript
js实现textarea限制输入字数
2017/02/13 Javascript
vue 使用v-for进行循环的实例代码详解
2020/02/19 Javascript
javascript 内存模型实例详解
2020/04/18 Javascript
详解vue实现坐标拾取器功能示例
2020/11/18 Vue.js
[01:02]DOTA2上海特锦赛SHOWOPEN
2016/03/25 DOTA
[45:18]完美世界DOTA2联赛循环赛 PXG vs IO 第二场 11.06
2020/11/09 DOTA
Python闭包实现计数器的方法
2015/05/05 Python
python实现的多线程端口扫描功能示例
2017/01/21 Python
无法使用pip命令安装python第三方库的原因及解决方法
2018/06/12 Python
通过python顺序修改文件名字的方法
2018/07/11 Python
python输出带颜色字体实例方法
2019/09/01 Python
解决flask接口返回的内容中文乱码的问题
2020/04/03 Python
Ubuntu20.04环境安装tensorflow2的方法步骤
2021/01/29 Python
HTML5中新标签和常用标签详解
2014/03/07 HTML / CSS
用HTML5制作一个简单的桌球游戏的教程
2015/05/12 HTML / CSS
很酷的小工具和电子产品商城:GearBest
2016/11/19 全球购物
全球地下的服装和态度:Slam Jam
2018/02/04 全球购物
美国在线肉类和海鲜配送:Crowd Cow
2020/10/02 全球购物
New delete 与malloc free 的联系与区别
2013/02/04 面试题
亮化工程实施方案
2014/03/17 职场文书
教师敬业奉献模范事迹材料
2014/05/18 职场文书
音乐教师求职信范文
2015/03/20 职场文书
MySQL基础(一)
2021/04/05 MySQL
教你如何使用Python Tkinter库制作记事本
2021/06/10 Python