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左侧导航栏和页面选中效果
Aug 21 Javascript
JQ技术实现注册页面带有校验密码强度
Jul 27 Javascript
Jquery元素追加和删除的实现方法
May 24 Javascript
基于JavaScript代码实现自动生成表格
Jun 15 Javascript
JavaScript每天必学之基础知识
Sep 17 Javascript
浅谈JavaScript的自动垃圾收集机制
Dec 15 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
Jan 24 Javascript
干货!教大家如何选择Vue和React
Mar 13 Javascript
Bootstrap与Angularjs的模态框实例代码
Aug 03 Javascript
详解Angular5 路由传参的3种方法
Apr 28 Javascript
vue.js 实现评价五角星组件的实例代码
Aug 13 Javascript
vue 路由守卫(导航守卫)及其具体使用
Feb 25 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
Discuz Uchome ajaxpost小技巧
2011/01/04 PHP
php 无法加载mcrypt.dll的解决办法
2013/04/03 PHP
php无序树实现方法
2015/07/28 PHP
PHP实现找出链表中环的入口节点
2018/01/16 PHP
让FireFox支持innerText的实现代码
2009/12/01 Javascript
javascript setTimeout和setInterval 的区别
2009/12/08 Javascript
浏览器加载、渲染和解析过程黑箱简析
2012/11/29 Javascript
JS关键字球状旋转效果的实例代码
2013/11/29 Javascript
jquery实现人性化的有选择性禁用鼠标右键
2014/06/30 Javascript
完美实现仿QQ空间评论回复特效
2015/05/06 Javascript
基于javascript实现图片左右切换效果
2016/01/25 Javascript
javascript正则表达式之分组概念与用法实例
2016/06/16 Javascript
jquery获取点击控件的绝对位置简单实例
2016/10/13 Javascript
DropDownList实现可输入可选择(两种版本可选)
2016/12/07 Javascript
jQuery查找dom的几种方法效率详解
2017/05/17 jQuery
echarts同一页面中四个图表切换的js数据交互方法示例
2018/07/03 Javascript
js操作table中tr的顺序实现上移下移一行的效果
2018/11/22 Javascript
使用pm2部署node生产环境的方法步骤
2019/03/09 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
2019/11/26 Javascript
使用vue实现一个电子签名组件的示例代码
2020/01/06 Javascript
JavaScript中this函数使用实例解析
2020/02/21 Javascript
JS一次前端面试经历记录
2020/03/19 Javascript
Openlayers实现扩散的动态点(水纹效果)
2020/08/17 Javascript
python重试装饰器示例
2014/02/11 Python
Python使用tablib生成excel文件的简单实现方法
2016/03/16 Python
django 常用orm操作详解
2017/09/13 Python
Python求平面内点到直线距离的实现
2020/01/19 Python
Django框架获取form表单数据方式总结
2020/04/22 Python
python爬虫可以爬什么
2020/06/16 Python
踩坑:pytorch中eval模式下结果远差于train模式介绍
2020/06/23 Python
Matplotlib中rcParams使用方法
2021/01/05 Python
亚洲最大旅游体验平台:KKday
2017/10/21 全球购物
《欢乐的泼水节》教学反思
2014/04/22 职场文书
医院病假条范文
2015/08/17 职场文书
《为人民服务》教学反思
2016/02/20 职场文书
Python中OpenCV实现简单车牌字符切割
2021/06/11 Python