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 相关文章推荐
JavaScript 参考教程
Dec 29 Javascript
Jquery uploadify图片上传插件无法上传的解决方法
Dec 16 Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
Oct 19 Javascript
jQuery带进度条全屏图片轮播特效代码分享
Jun 28 Javascript
Node.js操作redis实现添加查询功能
May 25 Javascript
vue2.0 axios前后端数据处理实例代码
Jun 30 Javascript
关于HTML5的data-*自定义属性的总结
May 05 Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
Jul 05 Javascript
解决LayUI数据表格复选框不居中显示的问题
Sep 25 Javascript
JS+DIV实现拖动效果
Feb 11 Javascript
Vue常用API、高级API的相关总结
Feb 02 Vue.js
详解前端任务构建利器Gulp.js使用指南
Apr 30 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 array的学习笔记
2012/05/10 PHP
在WordPress中获取数据库字段内容和添加主题设置菜单
2016/01/11 PHP
Prototype Object对象 学习
2009/07/12 Javascript
javascript 解决表单仍然提交即使监听处理函数返回false
2010/03/14 Javascript
深入理解jQuery事件绑定
2016/06/02 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
2016/08/09 Javascript
jQuery旋转插件jqueryrotate用法详解
2016/10/13 Javascript
JS仿淘宝搜索框用户输入事件的实现
2017/06/19 Javascript
JS从非数组对象转数组的方法小结
2018/03/26 Javascript
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
2019/07/11 jQuery
通过js实现压缩图片上传功能
2020/02/25 Javascript
JavaScript Blob对象原理及用法详解
2020/10/14 Javascript
[01:00] DOTA2英雄背景故事第五期之重力引力法则谜团
2020/07/16 DOTA
[00:14]PWL:老朋友Mushi拍VLOG与中国玩家问好
2020/11/04 DOTA
python实现寻找最长回文子序列的方法
2018/06/02 Python
Django分页查询并返回jsons数据(中文乱码解决方法)
2018/08/02 Python
python 重命名轴索引的方法
2018/11/10 Python
python实现最大子序和(分治+动态规划)
2019/07/05 Python
Python使用QQ邮箱发送邮件报错smtplib.SMTPAuthenticationError
2019/12/20 Python
vue学习笔记之动态组件和v-once指令简单示例
2020/02/29 Python
jupyter 导入csv文件方式
2020/04/21 Python
python字符串拼接+和join的区别详解
2020/12/03 Python
20佳惊艳的HTML5应用程序示例分享
2011/05/03 HTML / CSS
彪马荷兰官网:PUMA荷兰
2019/05/08 全球购物
德国在线购买葡萄酒网站:Geile Weine
2019/09/24 全球购物
Java的for语句中break, continue和return的区别
2013/12/19 面试题
JMS中Topic和Queue有什么区别
2013/05/15 面试题
师范生自我鉴定范文
2013/10/05 职场文书
自我鉴定200字
2013/10/28 职场文书
秘书专业自荐信范文
2013/12/26 职场文书
七年级音乐教学反思
2014/01/26 职场文书
中国梦演讲稿3分钟
2014/08/19 职场文书
群众路线教育实践活动学习笔记
2014/11/05 职场文书
2015年世界无车日活动总结
2015/03/23 职场文书
2022年显卡天梯图(6月更新)
2022/06/17 数码科技
python如何利用cv2.rectangle()绘制矩形框
2022/12/24 Python