JS实现动态添加DOM节点和事件的方法示例


Posted in Javascript onApril 28, 2017

本文实例讲述了JS实现动态添加DOM节点和事件的方法。分享给大家供大家参考,具体如下:

运行效果图如下:

JS实现动态添加DOM节点和事件的方法示例

完整实例代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Js(DOM)动态添加节点和事件</title>
<script type="text/javascript">
function addEl(){
  //找到要添加节点的父节点(table)
  var tb = document.getElementById("tb");
  //创建tbody节点,表格中必须有tbody才能添加,直接添加tr不成功
  var tbody = document.createElement("tbody");
  //创建tr节点
  var tr = document.createElement("tr");
  //创建td节点
  var td = document.createElement("td");
  //添加一个文本框节点,设置id和type属性
  var newTp = document.createElement("input");
  newTp.id = "text1";
  newTp.type = "text";
  //添加一个按钮
  var newEl = document.createElement("input");
  newEl.type = 'button';
  newEl.value = "button";
  newEl.name = "button1";
  //添加onclick事件,和事件执行的函数
  newEl.onclick = function dofun(){
  document.getElementById("txt").value += newTp.value;
  }
  //把2个节点添加到td当中
  td.appendChild(newTp)
  td.appendChild(newEl);
  //把td添加到tr中
  tr.appendChild(td);
  //把tr添加到td中
  tbody.appendChild(tr);
  //把td添加到table中
  tb.appendChild(tbody);
}
</script>
</script>
</head>
<body>
<table id="tb">
  <tr>
  <td>
   添加节点的地方
  </td>
  </tr>
</table>
<table>
  <tr>
  <td>
   <input type="button" value="添加节点" onclick="addEl()" />
  </td>
  <td>
   <input type="text" id="txt"/>
  </td>
  </tr>
</table>
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
浅析Cookie中的Path与domain
Dec 18 Javascript
使用js判断当前时区TimeZone是否是夏令时
Feb 23 Javascript
node.js中的path.normalize方法使用说明
Dec 08 Javascript
jQuery中:selected选择器用法实例
Jan 04 Javascript
基于JavaScript如何实现ajax调用后台定义的方法
Dec 29 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
Apr 30 Javascript
JavaScript定时器实现的原理分析
Dec 06 Javascript
Vue声明式渲染详解
May 17 Javascript
Vue header组件开发详解
Jan 26 Javascript
vue-lazyload图片延迟加载插件的实例讲解
Feb 09 Javascript
如何换个角度使用VUE过滤器详解
Sep 11 Javascript
vue-cli 关闭热更新操作
Sep 18 Javascript
jQuery自定义元素右键点击事件(实现案例)
Apr 28 #jQuery
详解angularJs模块ui-router之状态嵌套和视图嵌套
Apr 28 #Javascript
vue基于Vue2.0和高德地图的地图组件实例
Apr 28 #Javascript
d3.js实现立体柱图的方法详解
Apr 28 #Javascript
JS基于正则表达式的替换操作(replace)用法示例
Apr 28 #Javascript
vue调用高德地图实例代码
Apr 28 #Javascript
vue省市区三联动下拉选择组件的实现
Apr 28 #Javascript
You might like
超级简单的发送邮件程序
2006/10/09 PHP
php数组总结篇(一)
2008/09/30 PHP
PHP使用MPDF类生成PDF的方法
2015/12/08 PHP
PHP实现Unicode编码相互转换的方法示例
2020/11/17 PHP
PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(上)
2017/05/26 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
PHP实现的微信公众号扫码模拟登录功能示例
2019/05/30 PHP
php数组和链表的区别总结
2019/09/20 PHP
如何创建一个JavaScript弹出DIV窗口层的效果
2013/09/25 Javascript
jquery动态改变form属性提交表单
2014/06/03 Javascript
jQuery实现长按按钮触发事件的方法
2015/02/02 Javascript
Node.js中的流(Stream)介绍
2015/03/30 Javascript
浅析JS异步加载进度条
2016/05/05 Javascript
jQuery事件绑定用法详解
2016/09/08 Javascript
用AngularJS来实现监察表单按钮的禁用效果
2016/11/02 Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
2017/03/13 Javascript
微信小程序 实现动态显示和隐藏某个控件
2017/04/27 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
2017/06/13 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
2018/08/07 Javascript
vue组件tabbar使用方法详解
2018/11/06 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
2019/02/17 Javascript
vue实现多组关键词对应高亮显示功能
2019/07/25 Javascript
Vue Element UI + OSS实现上传文件功能
2019/07/31 Javascript
js根据后缀判断文件文件类型的代码
2020/05/09 Javascript
jquery实现淡入淡出轮播图效果
2020/12/13 jQuery
[52:10]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第二场 6.3
2018/06/04 DOTA
快速排序的算法思想及Python版快速排序的实现示例
2016/07/02 Python
Python基于递归算法实现的走迷宫问题
2017/08/04 Python
对pandas进行数据预处理的实例讲解
2018/04/20 Python
python学生信息管理系统(初级版)
2018/10/17 Python
HTML5 MiranaVideo播放器 (代码开源)
2010/06/11 HTML / CSS
几道PHP面试题
2013/04/14 面试题
小孩百日宴答谢词
2014/01/15 职场文书
主题团日活动总结
2014/06/25 职场文书
公司文体活动总结
2015/05/07 职场文书
烈士陵园观后感
2015/06/08 职场文书