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 相关文章推荐
JQUERY实现左侧TIPS滑进滑出效果示例
Jun 27 Javascript
jQuery给多个不同元素添加class样式的方法
Mar 26 Javascript
Angularjs中UI Router全攻略
Jan 29 Javascript
Javascript之BOM(window对象)详解
May 25 Javascript
Bootstrap实现带动画过渡的弹出框
Aug 09 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
Oct 12 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
Nov 03 Javascript
JS实现颜色动态淡化效果
Mar 06 Javascript
vue.js实例对象+组件树的详细介绍
Oct 20 Javascript
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
vue2.0自定义指令示例代码详解
Apr 25 Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
May 27 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
再说下636单管机
2021/03/02 无线电
PHP fastcgi模式上传大文件(大约有300多K)报错
2014/09/28 PHP
PHP使用xmllint命令处理xml与html的方法
2014/12/15 PHP
laravel返回统一格式错误码问题
2019/11/04 PHP
js 动态选中下拉框
2009/11/26 Javascript
jQuery数组处理代码详解(含实例演示)
2012/02/03 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
2015/03/27 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
2015/05/06 Javascript
JQuery 两种方法解决刚创建的元素遍历不到的问题
2016/04/13 Javascript
JQuery点击事件回到页面顶部效果的实现代码
2016/05/24 Javascript
浅谈Javascript数据属性与访问器属性
2016/07/26 Javascript
jQuery判断是否存在滚动条的简单方法
2016/09/17 Javascript
利用JS实现简单的日期选择插件
2017/01/23 Javascript
Vue 实现双向绑定的四种方法
2018/03/16 Javascript
ios设备中angularjs无法改变页面title的解决方法
2018/09/13 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
2018/12/20 Javascript
Node.js Domain 模块实例详解
2020/03/18 Javascript
js实现贪吃蛇游戏(简易版)
2020/09/29 Javascript
原生js实现贪吃蛇游戏
2020/10/26 Javascript
[34:44]Liquid vs TNC Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
[42:32]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
使用Python从有道词典网页获取单词翻译
2016/07/03 Python
Python利用递归和walk()遍历目录文件的方法示例
2017/07/14 Python
浅谈Python中的zip()与*zip()函数详解
2018/02/24 Python
python实现定时提取实时日志程序
2018/06/22 Python
Python实现Dijkstra算法
2018/10/17 Python
在win10和linux上分别安装Python虚拟环境的方法步骤
2019/05/09 Python
Python中查看变量的类型内存地址所占字节的大小
2019/06/26 Python
Python生成个性签名图片获取GUI过程解析
2019/12/16 Python
python 实时调取摄像头的示例代码
2020/11/25 Python
C#基础面试题
2016/10/17 面试题
详解如何解决使用JSON.stringify时遇到的循环引用问题
2021/03/23 Javascript
优秀实习生主要事迹
2014/05/29 职场文书
人事代理委托书
2014/09/27 职场文书
世界地球日活动总结
2015/02/09 职场文书
2015年清明节网上祭英烈活动总结
2015/03/26 职场文书