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 相关文章推荐
HTML 自动伸缩的表格Table js实现
Apr 01 Javascript
javascript中input中readonly和disabled区别介绍
Oct 23 Javascript
单击某一段文字改写文本颜色
Jun 06 Javascript
javascript实现树形菜单的方法
Jul 17 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
Aug 18 Javascript
关于vuex的学习实践笔记
Apr 05 Javascript
canvas绘制爱心的几种方法总结(推荐)
Oct 31 Javascript
javascript使用substring实现的展开与收缩文字功能示例
Jun 17 Javascript
express框架下使用session的方法
Jul 31 Javascript
Vue中函数防抖节流的理解及应用实现
Apr 24 Javascript
javascript操作向表格中动态加载数据
Aug 27 Javascript
Vue仿Bibibili首页的问题
Jan 21 Vue.js
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中使用php://input处理相同name值的表单数据
2015/02/03 PHP
PHP模拟asp中response类实现方法
2015/08/08 PHP
解决安装WampServer时提示缺少msvcr110.dll文件的问题
2017/07/09 PHP
laravel手动创建数组分页的实现代码
2018/06/07 PHP
CSS中一些@规则的用法小结
2021/03/09 HTML / CSS
传递参数的标准方法(jQuery.ajax)
2008/11/19 Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
2012/12/19 Javascript
javascript一元操作符(递增、递减)使用示例
2013/08/07 Javascript
AngularJS中的模块详解
2015/01/29 Javascript
javaScript基础语法介绍
2015/02/28 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
2016/02/25 Javascript
JavaScript事件用法浅析
2016/10/31 Javascript
详谈AngularJs 控制器、数据绑定、作用域
2017/07/09 Javascript
JS实现身份证输入框的输入效果
2017/08/21 Javascript
javascript实现最长公共子序列实例代码
2018/02/05 Javascript
20个最常见的jQuery面试问题及答案
2018/05/23 jQuery
微信小程序实现自定义picker选择器弹窗内容
2020/05/26 Javascript
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
2019/01/18 jQuery
vue组件三大核心概念图文详解
2019/05/30 Javascript
layer关闭当前窗口页面以及确认取消按钮的方法
2019/09/09 Javascript
RxJS在TypeScript中的简单使用详解
2020/04/13 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
2020/10/30 Javascript
[23:21]Ti4 冒泡赛第二轮DK vs C9 2
2014/07/14 DOTA
python安装教程 Pycharm安装详细教程
2017/05/02 Python
python好玩的项目—色情图片识别代码分享
2017/11/07 Python
解决pycharm无法识别本地site-packages的问题
2018/10/13 Python
详解Python中的内建函数,可迭代对象,迭代器
2019/04/29 Python
Python将主机名转换为IP地址的方法
2019/08/14 Python
pandas数据处理进阶详解
2019/10/11 Python
Python中的延迟绑定原理详解
2019/10/11 Python
中国领先的汽车保养服务平台:途虎养车
2019/10/18 全球购物
创先争优活动承诺书
2014/08/30 职场文书
债务纠纷委托书
2014/08/30 职场文书
2015羊年春节慰问信
2015/02/14 职场文书
2015年社区平安建设工作总结
2015/05/13 职场文书
科技馆观后感
2015/06/08 职场文书