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浮动DIV提示信息并自动隐藏的代码
Aug 29 Javascript
改变状态栏文字的js代码
Jun 13 Javascript
JS动画效果打开、关闭层的实现方法
May 09 Javascript
js密码强度检测
Jan 07 Javascript
谈一谈JS消息机制和事件机制的理解
Apr 14 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
Nov 24 Javascript
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
Mar 06 Javascript
JavaScript实现创建自定义对象的常用方式总结
Jul 09 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
Sep 18 Javascript
JavaScript数据结构之栈实例用法
Jan 18 Javascript
基于JS实现一个随机生成验证码功能
May 29 Javascript
vue-router中hash模式与history模式的区别
Jun 23 Vue.js
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 文件上传源码分析(RFC1867)
2009/10/30 PHP
php empty() 检查一个变量是否为空
2011/11/10 PHP
Cookie 注入是怎样产生的
2009/04/08 Javascript
node.js中的fs.stat方法使用说明
2014/12/16 Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
2015/06/16 Javascript
Javascript中this绑定的3种方法与比较
2016/10/13 Javascript
jQ处理xml文件和xml字符串的方法(详解)
2016/11/22 Javascript
jquery表单验证插件validation使用方法详解
2017/01/20 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
2017/02/05 Javascript
C#微信小程序服务端获取用户解密信息实例代码
2017/03/10 Javascript
浅谈Vue-cli 命令行工具分析
2017/11/22 Javascript
Vue中的v-for指令不起效果的解决方法
2018/09/27 Javascript
vue-cli3搭建项目的详细步骤
2018/12/05 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
2020/03/29 Javascript
微信小程序 button样式设置为图片的方法
2020/06/19 Javascript
解决vant中 tab栏遇到的坑 van-tabs
2020/11/04 Javascript
Vue 实例中使用$refs的注意事项
2021/01/29 Vue.js
Python实现的下载8000首儿歌的代码分享
2014/11/21 Python
Python 查看文件的读写权限方法
2018/01/23 Python
Python实现的视频播放器功能完整示例
2018/02/01 Python
python查看数据类型的方法
2019/10/12 Python
Python绘制二维曲线的日常应用详解
2019/12/04 Python
浅谈pytorch torch.backends.cudnn设置作用
2020/02/20 Python
Python 安装 virturalenv 虚拟环境的教程详解
2020/02/21 Python
解决python cv2.imread 读取中文路径的图片返回为None的问题
2020/06/02 Python
python3通过subprocess模块调用脚本并和脚本交互的操作
2020/12/05 Python
vue.js刷新当前页面的实例讲解
2020/12/29 Python
data:image data url 文件转为Blob上传后端的方法
2019/07/16 HTML / CSS
英国时尚优质的女装:Hope Fashion
2018/08/14 全球购物
美国农场商店:Blain’s Farm & Fleet
2020/01/17 全球购物
物理教育专业毕业生推荐信
2013/11/03 职场文书
2014年群众路线教育实践活动整改措施
2014/09/24 职场文书
检讨书范文500字
2015/01/28 职场文书
2015年司机工作总结
2015/04/23 职场文书
Python基础之函数嵌套知识总结
2021/05/23 Python
Ajax请求超时与网络异常处理图文详解
2021/05/23 Javascript