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 相关文章推荐
FireFox下XML对象转化成字符串的解决方法
Dec 09 Javascript
js模拟点击事件实现代码
Nov 06 Javascript
jquery插件如何使用 jQuery操作Cookie插件使用介绍
Dec 15 Javascript
实现只能输入数字的input不用replace方法
Sep 12 Javascript
使用js如何实现全选与全不选
Dec 30 Javascript
浅析jQuery EasyUI中的tree使用指南
Dec 18 Javascript
JQuery ztree带筛选、异步加载实例讲解
Feb 25 Javascript
JS实现获取剪贴板内容的方法
Jun 21 Javascript
手机端实现Bootstrap简单图片轮播效果
Oct 13 Javascript
深入理解jquery中extend的实现
Dec 22 Javascript
jQuery表格(Table)基本操作实例分析
Mar 10 Javascript
vue拖拽排序插件vuedraggable使用方法详解
Aug 21 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 session 检测和注销
2009/03/16 PHP
PHP5权威编程阅读学习笔记 附电子书下载
2012/07/05 PHP
php使用ffmpeg向视频中添加文字字幕的实现方法
2016/05/23 PHP
详解Yii2.0 rules验证规则集合
2017/03/21 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题
2007/01/09 Javascript
对字符串进行HTML编码和解码的JavaScript函数
2010/02/01 Javascript
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
2010/12/04 Javascript
FusionCharts图表显示双Y轴双(多)曲线
2012/11/22 Javascript
使用iframe window的scroll方法控制iframe页面滚动
2014/03/05 Javascript
js中利用tagname和id获取元素的方法
2016/01/03 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
2016/01/17 Javascript
AngularJS表单验证功能分析
2017/05/26 Javascript
微信小程序中如何使用flyio封装网络请求
2019/07/03 Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
2020/02/16 Javascript
微信小程序webSocket的使用方法
2020/02/20 Javascript
[00:35]DOTA2上海特级锦标赛 MVP.Phx战队宣传片
2016/03/04 DOTA
布同 统计英文单词的个数的python代码
2011/03/13 Python
python 的列表遍历删除实现代码
2020/04/12 Python
Python3实现Web网页图片下载
2016/01/28 Python
Python 描述符(Descriptor)入门
2016/11/20 Python
python实现录音小程序
2020/10/26 Python
python实现逐个读取txt字符并修改
2018/12/24 Python
深入了解Django中间件及其方法
2019/07/26 Python
python实现将列表中各个值快速赋值给多个变量
2020/04/02 Python
利用纯html5绘制出来的一款非常漂亮的时钟
2015/01/04 HTML / CSS
英国天然保健品网站:Simply Supplements
2017/03/22 全球购物
北京麒麟网信息技术有限公司网络游戏测试面试题
2013/09/28 面试题
计算机专业推荐信范文
2013/11/20 职场文书
超市仓管员岗位职责
2014/04/07 职场文书
组织生活会发言材料
2014/12/15 职场文书
大学生逃课检讨书
2015/05/04 职场文书
来探秘“德国中小企业”的成功之道
2019/07/26 职场文书
正确使用MySQL update语句
2021/05/26 MySQL
解决mysql:ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO/YES)
2021/06/26 MySQL
python中对列表的删除和添加方法详解
2022/02/24 Python
详解Python+OpenCV绘制灰度直方图
2022/03/22 Python