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 相关文章推荐
学习YUI.Ext 第三天
Mar 10 Javascript
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
Aug 19 Javascript
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
Nov 04 Javascript
在JavaScript中使用timer示例
May 08 Javascript
Ext GridPanel加载完数据后进行操作示例代码
Jun 17 Javascript
JavaScript实现数组降维详解
Jan 05 Javascript
Javascript中JSON数据分组优化实践及JS操作JSON总结
Dec 22 Javascript
Vue+element-ui 实现表格的分页功能示例
Aug 18 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
Dec 13 Javascript
轻松学习JavaScript函数中的 Rest 参数
May 30 Javascript
ES6 Generator基本使用方法示例
Jun 06 Javascript
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 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
re0第二季蕾姆被制作组打入冷宫!艾米莉亚女主扶正,原因唏嘘
2020/04/02 日漫
PHP 5昨天隆重推出--PHP 5/Zend Engine 2.0新特性
2006/10/09 PHP
PHP5中Cookie与 Session使用详解
2013/04/30 PHP
九个你必须知道而且又很好用的php函数和特点
2013/08/08 PHP
php猴子选大王问题解决方法
2015/05/12 PHP
使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能示例
2017/09/15 PHP
PHP使用Session实现上传进度功能详解
2019/08/06 PHP
Laravel开启跨域请求的方法
2019/10/13 PHP
一些常用的Javascript函数
2006/12/22 Javascript
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
2012/02/03 Javascript
用js+iframe形成页面的一种遮罩效果的具体实现
2013/12/31 Javascript
JavaScript获取当前网页标题(title)的方法
2015/04/03 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
2015/08/31 Javascript
JS实现类似51job上的地区选择效果示例
2016/11/17 Javascript
整理关于Bootstrap排版的慕课笔记
2017/03/29 Javascript
js canvas实现放大镜查看图片功能
2017/06/08 Javascript
关于jquery form表单序列化的注意事项详解
2017/08/01 jQuery
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
2019/09/17 Javascript
vue 实现LED数字时钟效果(开箱即用)
2019/12/08 Javascript
对python pandas读取剪贴板内容的方法详解
2019/01/24 Python
Python批量生成特定尺寸图片及图画任意文字的实例
2019/01/30 Python
pygame实现俄罗斯方块游戏(AI篇1)
2019/10/29 Python
pytorch AvgPool2d函数使用详解
2020/01/03 Python
Python读取分割压缩TXT文本文件实例
2020/02/14 Python
用Python绘制漫步图实例讲解
2020/02/26 Python
Python3 shelve对象持久存储原理详解
2020/03/23 Python
如何安装并在pycharm使用selenium的方法
2020/04/30 Python
Python常用GUI框架原理解析汇总
2020/12/07 Python
整理HTML5移动端开发的常用触摸事件
2016/04/15 HTML / CSS
Gap工厂店:Gap Factory
2017/11/02 全球购物
旅游与酒店管理的自我评价分享
2013/11/03 职场文书
公司部门司机岗位职责
2014/01/03 职场文书
求职信内容一般写什么?
2015/03/20 职场文书
2015年禁毒工作总结
2015/04/30 职场文书
民间借贷纠纷案件代理词
2015/05/26 职场文书
Python如何识别银行卡卡号?
2021/06/10 Python