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 相关文章推荐
JS仿flash上传头像效果实现代码
Jul 18 Javascript
jQuery打字效果实现方法(附demo源码下载)
Dec 18 Javascript
JavaScript入门教程之引用类型
May 04 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
May 16 Javascript
轻松掌握JavaScript代理模式
Aug 26 Javascript
浅谈Javascript中的函数、this以及原型
Oct 09 Javascript
微信小程序开发之toast等弹框提示使用教程
Jun 08 Javascript
vue-cli 引入、配置axios的方法
May 08 Javascript
vue.js实现的绑定class操作示例
Jul 06 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
Nov 15 Javascript
vue-cli3+typescript初体验小结
Feb 28 Javascript
解决vue自定义全局消息框组件问题
Nov 22 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
PHP面向对象学习笔记之二 生成对象的设计模式
2012/10/06 PHP
ThinkPHP中的系统常量和预定义常量集合
2014/07/01 PHP
form自动提交实例讲解
2017/07/10 PHP
Js 中debug方式
2010/02/07 Javascript
js之事件冒泡和事件捕获详细介绍
2013/10/28 Javascript
toggle()隐藏问题的解决方法
2014/02/17 Javascript
jquery实现的一个简单进度条效果实例
2014/05/12 Javascript
js从Cookies里面取值的简单实现
2014/06/30 Javascript
JavaScript动态添加style节点的方法
2015/06/09 Javascript
JQuery点击行tr实现checkBox选中的简单实例
2016/05/26 Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
2017/07/12 jQuery
Vue.js实现价格计算器功能
2020/03/30 Javascript
jQuery实现切换隐藏与显示同时切换图标功能
2017/10/29 jQuery
JavaScript中使用import 和require打包后实现原理分析
2018/03/07 Javascript
webpack 模块热替换原理
2018/04/09 Javascript
bootstrap下拉框动态赋值方法
2018/08/10 Javascript
[05:10]2014DOTA2国际邀请赛 通往胜利之匙赛场探秘之旅
2014/07/18 DOTA
Python中声明只包含一个元素的元组数据方法
2014/08/25 Python
使用Python发送邮件附件以定时备份MySQL的教程
2015/04/25 Python
使用Python更换外网IP的方法
2018/07/09 Python
Python调用adb命令实现对多台设备同时进行reboot的方法
2018/10/15 Python
Python 硬币兑换问题
2019/07/29 Python
django 控制页面跳转的例子
2019/08/06 Python
Pytorch卷积层手动初始化权值的实例
2019/08/17 Python
python opencv进行图像拼接
2020/03/27 Python
python3排序的实例方法
2020/10/20 Python
创造美妙香氛体验:Aera扩散器和香水
2018/11/25 全球购物
意大利在线眼镜精品店:Ottica Lipari
2019/11/11 全球购物
亲子读书活动方案
2014/02/22 职场文书
老公给老婆的保证书
2014/04/28 职场文书
环保倡议书格式范文
2014/05/14 职场文书
2014高考励志标语
2014/06/05 职场文书
2014年扫黄打非工作总结
2014/12/03 职场文书
《卧薪尝胆》读后感3篇
2019/12/26 职场文书
Golang 实现WebSockets
2022/04/24 Golang
Windows Server 2012 R2 磁盘分区教程
2022/04/29 Servers