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 相关文章推荐
一个js的tab切换效果代码[代码分离]
Apr 11 Javascript
JS 添加千分位与去掉千分位的示例
Jul 11 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
Aug 11 Javascript
Javascript之BOM(window对象)详解
May 25 Javascript
bootstrap suggest下拉框使用详解
Apr 10 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
Aug 16 Javascript
JavaScript实现获取select下拉框中第一个值的方法
Feb 06 Javascript
自定义javascript验证框架示例【附源码下载】
May 31 Javascript
vue点击自增和求和的实例代码
Nov 06 Javascript
js实现聊天对话框
Feb 08 Javascript
Vue 构造选项 - 进阶使用说明
Aug 14 Javascript
关于angular引入ng-zorro的问题浅析
Sep 09 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 CURL获取邮箱地址的详解
2013/06/03 PHP
解析php中的fopen()函数用打开文件模式说明
2013/06/20 PHP
PHP迭代器实现斐波纳契数列的函数
2013/11/12 PHP
php 三大特点:封装,继承,多态
2017/02/19 PHP
用Javascript 获取页面元素的位置的代码
2009/09/25 Javascript
上传的js验证(图片/文件的扩展名)
2013/04/25 Javascript
js获取php变量的实现代码
2013/08/10 Javascript
js setTimeout opener的用法示例详解
2013/10/23 Javascript
js/jquery判断浏览器的方法小结
2014/09/02 Javascript
微信小程序 swiper组件详解及实例代码
2016/10/25 Javascript
es6系列教程_ Map详解以及常用api介绍
2017/09/25 Javascript
JS严格模式知识点总结
2018/02/27 Javascript
讲解vue-router之什么是编程式路由
2018/05/28 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
2018/11/27 Javascript
Python实现过滤单个Android程序日志脚本分享
2015/01/16 Python
Python构造函数及解构函数介绍
2015/02/26 Python
python根据日期返回星期几的方法
2015/07/06 Python
PyQt5 多窗口连接实例
2019/06/19 Python
jupyter notebook oepncv 显示一张图像的实现
2020/04/24 Python
Pytorch数据拼接与拆分操作实现图解
2020/04/30 Python
HTML5中的autofocus(自动聚焦)属性介绍
2014/04/23 HTML / CSS
AmazeUI 点击元素显示全屏的实现
2020/08/25 HTML / CSS
Gap加拿大官网:Gap Canada
2017/08/24 全球购物
Made in Design英国:设计家具、照明、家庭装饰和花园家具
2019/09/24 全球购物
家得宝墨西哥官网:The Home Depot墨西哥
2019/11/18 全球购物
必须要使用游标的SQL语句有那些
2012/05/07 面试题
计算机网络毕业生自荐信
2013/10/01 职场文书
十佳教师事迹材料
2014/01/11 职场文书
优秀女职工事迹材料
2014/02/06 职场文书
分公司总经理岗位职责
2014/07/30 职场文书
体育教师个人总结
2015/02/09 职场文书
入党积极分子个人总结
2015/03/02 职场文书
人民检察院起诉书
2015/05/20 职场文书
被告答辩状范文
2015/05/22 职场文书
单身狗福利?Python爬取某婚恋网征婚数据
2021/06/03 Python
Python制作春联的示例代码
2022/01/22 Python