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 不只是脚本
May 30 Javascript
用JavaScript实现UrlEncode和UrlDecode的脚本代码
Jul 23 Javascript
利用腾讯的ip地址库做ip物理地址定位
Jul 24 Javascript
JavaScript 注册事件代码
Jan 27 Javascript
javascript教程之不完整的继承(js原型链)
Jan 13 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
May 16 Javascript
详解如何实现一个简单的Node.js脚手架
Dec 04 Javascript
使用JavaScript中的lodash编写双色球效果
Jun 24 Javascript
详解Next.js页面渲染的优化方案
Jan 27 Javascript
es6 symbol的实现方法示例
Apr 02 Javascript
Vue axios获取token临时令牌封装案例
Sep 11 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
Oct 29 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
中东人咖啡哲学
2021/03/03 咖啡文化
php绝对路径与相对路径之间关系的的分析
2010/03/03 PHP
php unset全局变量运用问题的深入解析
2013/06/17 PHP
浅析PHP中strlen和mb_strlen的区别
2014/08/31 PHP
php实现encode64编码类实例
2015/03/24 PHP
WordPress中&quot;无法将上传的文件移动至&quot;错误的解决方法
2015/07/01 PHP
PHP类的特性实例分析
2016/09/28 PHP
laravel 解决crontab不执行的问题
2019/10/22 PHP
OfflineSave离线保存代码再次发布使用说明
2007/05/23 Javascript
jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)
2012/05/24 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
2014/02/04 Javascript
巧用局部变量提升javascript性能
2014/02/24 Javascript
jQuery中empty()方法用法实例
2015/01/16 Javascript
很全面的JavaScript常用功能汇总集合
2016/01/22 Javascript
基于Vue.js实现数字拼图游戏
2016/08/02 Javascript
js HTML5上传示例代码完整版
2016/10/10 Javascript
js实现上传图片预览方法
2016/10/25 Javascript
利用JS实现页面删除并重新排序功能
2016/12/09 Javascript
详解vue嵌套路由-query传递参数
2017/05/23 Javascript
vue 组件内获取actions的response方式
2019/11/08 Javascript
python局域网ip扫描示例分享
2014/04/03 Python
Djang中静态文件配置方法
2015/07/30 Python
python中返回矩阵的行列方法
2018/04/04 Python
python批量图片处理简单示例
2019/08/06 Python
python pillow模块使用方法详解
2019/08/30 Python
使用遗传算法求二元函数的最小值
2020/02/11 Python
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
2013/04/24 HTML / CSS
工伤赔偿协议书
2014/04/15 职场文书
三年级小学生评语
2014/04/22 职场文书
研发工程师岗位职责
2014/04/28 职场文书
2014入党积极分子批评与自我批评思想报告
2014/10/06 职场文书
2014年服务员工作总结
2014/11/18 职场文书
幼儿园圣诞节活动总结
2015/05/06 职场文书
家庭教育教师培训学习体会
2016/01/14 职场文书
mysql 8.0.24 安装配置方法图文教程
2021/05/12 MySQL
《火纹风花雪月无双》预告“神秘雇佣兵” 紫发剑客
2022/04/13 其他游戏