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 相关文章推荐
不要在cookie中使用特殊字符的原因分析
Jul 13 Javascript
Javascript之旅 对象的原型链之由来
Aug 25 Javascript
用JS控制回车事件的代码
Feb 20 Javascript
基于jquery实现的鼠标拖拽元素复制并写入效果
Aug 23 Javascript
Script标签与访问HTML页面详解
Jan 10 Javascript
javascript给span标签赋值的方法
Nov 26 Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
Mar 15 Javascript
AngularJS与BootStrap模仿百度分页的示例代码
May 23 Javascript
vue中接口域名配置为全局变量的实现方法
Sep 20 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
Jun 18 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
Oct 25 Javascript
关于JavaScript数组去重的一些理解汇总
Sep 10 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
apache rewrite_module模块使用教程
2008/01/10 PHP
PHP使用CURL获取302跳转后的地址实例
2014/05/04 PHP
CI框架无限级分类+递归的实现代码
2016/11/01 PHP
PHP后台备份MySQL数据库的源码实例
2019/03/18 PHP
通过隐藏option实现select的联动效果
2009/11/10 Javascript
jquery 快速回到页首的方法
2013/12/05 Javascript
js库Modernizr的介绍和使用
2015/05/07 Javascript
常用DOM整理
2015/06/16 Javascript
jQuery模拟黑客帝国矩阵效果实例
2015/06/28 Javascript
javascript对象的相关操作小结
2016/05/16 Javascript
jQuery生成假加载动画效果
2016/12/01 Javascript
js实现日期显示的一些操作(实例讲解)
2017/07/27 Javascript
动态统计当前输入内容的字节、字符数的实例详解
2017/10/27 Javascript
详解webpack + react + react-router 如何实现懒加载
2017/11/20 Javascript
nodejs简单访问及操作mysql数据库的方法示例
2018/03/15 NodeJs
JavaScript fetch接口案例解析
2018/08/30 Javascript
微信小程序实现发送验证码按钮效果
2018/12/20 Javascript
微信小程序实现日历效果
2018/12/28 Javascript
[52:15]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS LGD-GAMING
2014/05/23 DOTA
python使用arcpy.mapping模块批量出图
2017/03/06 Python
分享几道你可能遇到的python面试题
2017/07/24 Python
Python基于列表list实现的CRUD操作功能示例
2018/01/05 Python
详解python实现识别手写MNIST数字集的程序
2018/08/03 Python
详解用python写一个抽奖程序
2019/05/10 Python
一篇文章弄懂Python中的可迭代对象、迭代器和生成器
2019/08/12 Python
python实现的爬取电影下载链接功能示例
2019/08/26 Python
详解python路径拼接os.path.join()函数的用法
2019/10/09 Python
python爬虫scrapy图书分类实例讲解
2020/11/23 Python
Python实现淘宝秒杀功能的示例代码
2021/01/19 Python
不用游标的SQL语句有哪些
2012/09/07 面试题
大客户销售经理职责
2013/12/04 职场文书
品牌推广策划方案
2014/05/28 职场文书
我的梦想演讲稿500字
2014/08/21 职场文书
党员个人剖析材料
2014/09/30 职场文书
2014年宣传思想工作总结
2014/12/10 职场文书
如何利用python和DOS获取wifi密码
2021/03/31 Python