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 客户端验证上传图片的大小(兼容IE和火狐)
Aug 15 Javascript
简单的分页代码js实现
May 17 Javascript
浅谈javascript中的Function和Arguments
Aug 30 Javascript
JS在浏览器中解析Base64编码图像
Feb 09 Javascript
JS实现图片放大缩小的方法
Feb 15 Javascript
jQuery ajax动态生成table功能示例
Jun 14 jQuery
Vue中父组件向子组件通信的方法
Jul 11 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
Dec 26 Javascript
webpack 静态资源集中输出的方法示例
Nov 09 Javascript
js继承的这6种方式!(上)
Apr 23 Javascript
在 Vue 中编写 SVG 图标组件的方法
Feb 24 Javascript
JS精髓原型链继承及构造函数继承问题纠正
Jun 16 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原理之异常机制
2010/08/21 PHP
PHP多进程编程实例
2014/10/15 PHP
php程序员应具有的7种能力小结
2014/11/27 PHP
php比较两个字符串长度的方法
2015/07/13 PHP
php fseek函数读取大文件两种方法
2016/10/12 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
Laravel框架自定义验证过程实例分析
2019/02/01 PHP
使用jQuery validate 验证注册表单实例演示
2013/03/25 Javascript
javascript自动改变文字大小和颜色的效果的小例子
2013/08/02 Javascript
AngularJS 中的指令实践开发指南(一)
2016/03/20 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
2016/08/21 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
2016/11/06 Javascript
jQuery Ajax全解析
2017/02/13 Javascript
详解ECMAScript typeof用法
2018/07/25 Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
2018/10/19 Javascript
layui 弹出删除确认界面的实例
2019/09/06 Javascript
json_decode 索引为数字时自动排序问题解决方法
2020/03/28 Javascript
[43:51]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS Secret
2018/03/31 DOTA
Python爬虫实例_利用百度地图API批量获取城市所有的POI点
2018/01/10 Python
使用PyQt4 设置TextEdit背景的方法
2019/06/14 Python
python数据库操作mysql:pymysql、sqlalchemy常见用法详解
2020/03/30 Python
matlab 计算灰度图像的一阶矩,二阶矩,三阶矩实例
2020/04/22 Python
一文彻底解决HTML5页面中长按保存图片功能
2019/06/10 HTML / CSS
Tomcat的缺省是多少,怎么修改
2014/04/09 面试题
会计员岗位职责
2014/03/15 职场文书
学校党委副书记个人对照检查材料思想汇报
2014/09/28 职场文书
2014年卫生监督工作总结
2014/12/09 职场文书
2014年学校办公室工作总结
2014/12/19 职场文书
抗洪救灾感谢信
2015/01/22 职场文书
企业愿景口号
2015/12/25 职场文书
婚前协议书怎么写,才具有法律效力呢 ?
2019/06/28 职场文书
告诉你创业计划书的8个实用技巧
2019/07/12 职场文书
python字符串常规操作大全
2021/05/02 Python
golang fmt格式“占位符”的实例用法详解
2021/07/04 Golang
SQL SERVER触发器详解
2022/02/24 SQL Server
使用SQL实现车流量的计算的示例代码
2022/02/28 SQL Server