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 相关文章推荐
关于恒等于(===)和非恒等于(!==)
Aug 20 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
Sep 04 Javascript
Jquery日历插件制作简单日历
Oct 28 Javascript
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
Aug 24 Javascript
浅谈Angularjs link和compile的使用区别
Oct 21 Javascript
jQuery基于Ajax方式提交表单功能示例
Feb 10 Javascript
web.js.字符串与正则表达式操作
May 13 Javascript
元素全屏的设置与监听实例
Nov 28 Javascript
解决VUE框架 导致绑定事件的阻止冒泡失效问题
Feb 24 Javascript
node puppeteer(headless chrome)实现网站登录
May 09 Javascript
vue实现PC端录音功能的实例代码
Jun 05 Javascript
TypeScript 使用 Tuple Union 声明函数重载
Apr 07 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 XML备份Mysql数据库
2009/05/27 PHP
七款最流行的PHP本地服务器分享
2013/02/19 PHP
PHP遍历数组的三种方法及效率对比分析
2015/02/12 PHP
PHP连接MySQL数据库三种实现方法
2020/12/10 PHP
addRule在firefox下的兼容写法
2006/11/30 Javascript
Ajax::prototype 源码解读
2007/01/22 Javascript
一些经常会用到的Javascript检测函数
2010/05/31 Javascript
jQuery模拟超链接点击效果代码
2013/04/21 Javascript
javascript的数组和常用函数详解
2014/05/09 Javascript
JS面向对象编程详解
2016/03/06 Javascript
几种经典排序算法的JS实现方法
2016/03/25 Javascript
JavaScript数组实现数据结构中的队列与堆栈
2016/05/26 Javascript
Node.js连接mongodb实例代码
2017/06/06 Javascript
JS实现的简单四则运算计算器功能示例
2017/09/27 Javascript
Javascript中prototype与__proto__的关系详解
2018/03/11 Javascript
vue项目关闭eslint校验
2018/03/21 Javascript
小程序从手动埋点到自动埋点的实现方法
2019/01/24 Javascript
JS重学系列之聊聊new操作符
2019/03/04 Javascript
简介JavaScript错误处理机制
2020/08/04 Javascript
js绘制一条直线并旋转45度
2020/08/21 Javascript
vue-cli4.0多环境配置变量与模式详解
2020/12/30 Vue.js
Python中使用装饰器来优化尾递归的示例
2016/06/18 Python
Python 数据结构之旋转链表
2017/02/25 Python
python绘制简单折线图代码示例
2017/12/19 Python
scrapy spider的几种爬取方式实例代码
2018/01/25 Python
Django应用程序入口WSGIHandler源码解析
2019/08/05 Python
python破解bilibili滑动验证码登录功能
2019/09/11 Python
python3实现从kafka获取数据,并解析为json格式,写入到mysql中
2019/12/23 Python
详解修改Anaconda中的Jupyter Notebook默认工作路径的三种方式
2021/01/24 Python
美国环保婴儿用品公司:The Honest Company
2017/11/23 全球购物
安踏官方商城:anta.cn
2019/12/16 全球购物
面试求职的个人自我评价
2013/11/16 职场文书
募捐倡议书怎么写
2014/05/14 职场文书
2016大学迎新欢迎词
2015/09/29 职场文书
《少年闰土》教学反思
2016/02/18 职场文书
SpringCloud Function SpEL注入漏洞分析及环境搭建
2022/04/08 Java/Android