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 相关文章推荐
JQuery以JSON方式提交数据到服务端示例代码
May 05 Javascript
js实现顶部可折叠的菜单工具栏效果实例
May 09 Javascript
JS实现Fisheye效果动感放大菜单代码
Oct 21 Javascript
js简单判断flash是否加载完成的方法
Jun 21 Javascript
解析JavaScript中的字符串类型与字符编码支持
Jun 24 Javascript
利用Angularjs实现幻灯片效果
Sep 07 Javascript
概述如何实现一个简单的浏览器端js模块加载器
Dec 07 Javascript
webpack使用 babel-loader 转换 ES6代码示例
Aug 21 Javascript
Node.js笔记之process模块解读
May 31 Javascript
微信小程序下拉框组件使用方法详解
Dec 28 Javascript
微信公众号H5支付接口调用方法
Jan 10 Javascript
vue-cli 为项目设置别名的方法
Oct 15 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数组 为文章加关键字连接 文章内容自动加链接
2011/12/29 PHP
PHP会话控制:Session与Cookie详解
2014/09/27 PHP
thinkphp中html:list标签传递多个参数实例
2014/10/30 PHP
Thinkphp5.0框架使用模型Model的获取器、修改器、软删除数据操作示例
2019/10/11 PHP
chrome原生方法之数组
2011/11/30 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
2014/05/20 Javascript
详解JavaScript函数对象
2015/11/15 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
2016/08/05 Javascript
angularJs关于指令的一些冷门属性详解
2016/10/24 Javascript
9个让JavaScript调试更简单的Console命令
2016/11/14 Javascript
JS正则表达式修饰符global(/g)用法分析
2016/12/27 Javascript
详解Angular2 关于*ngFor 嵌套循环
2017/05/22 Javascript
JS+canvas绘制的动态机械表动画效果
2017/09/12 Javascript
原生javascript实现文件异步上传的实例讲解
2017/10/26 Javascript
利用ES6实现单例模式及其应用详解
2017/12/09 Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
2018/09/21 Javascript
ES6 Promise对象概念及用法实例详解
2019/10/15 Javascript
jquery html添加元素/删除元素操作实例详解
2020/05/20 jQuery
[03:05]《我与DAC》之xiao8:DAC与BG
2018/03/27 DOTA
mac系统安装Python3初体验
2018/01/02 Python
Python实现的端口扫描功能示例
2018/04/08 Python
python实现人工智能Ai抠图功能
2019/09/05 Python
Python基于pyecharts实现关联图绘制
2020/03/27 Python
Python实现AES加密,解密的两种方法
2020/10/03 Python
使用Html5中的cavas画一面国旗
2019/09/25 HTML / CSS
师范生教师实习自我鉴定
2013/09/27 职场文书
零件设计自荐信范文
2013/11/27 职场文书
教师队伍管理制度
2014/01/14 职场文书
消防应急演练方案
2014/02/12 职场文书
免职证明样本
2014/10/23 职场文书
介绍信范文
2015/01/31 职场文书
2015年爱牙日活动总结
2015/03/23 职场文书
董事长致辞
2015/07/29 职场文书
2016秋季校长开学典礼致辞
2015/11/26 职场文书
sentinel支持的redis高可用集群配置详解
2022/04/01 Redis
我们认为中短波广播场强仪的最佳组合
2022/04/05 无线电