当前位置:主页 > javascript教程 > JS实现动态添加DOM节点和事件的方法示例

JS实现动态添加DOM节点和事件的实例

发布:2019-09-16 20:34:49 217


为找教程的网友们整理了相关的编程文章,网友能书文根据主题投稿了本篇教程内容,涉及到JS、动态、添加、DOM节点、事件、JS实现动态添加DOM节点和事件的方法示例相关内容,已被602网友关注,下面的电子资料对本篇知识点有更加详尽的解释。

JS实现动态添加DOM节点和事件的方法示例

本文实例讲述了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操作DOM技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。


参考资料

相关文章

  • 快速解决vue动态绑定多个class的官方实例语法无效的问题

    发布:2022-06-23

    给大家整理一篇关于vue的教程,今天小编就为大家分享一篇快速解决vue动态绑定多个class的官方实例语法无效的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧


  • Aop动态代理和cglib实现代码详解

    发布:2023-01-04

    给大家整理一篇关于java的教程,这篇文章主要介绍了Aop动态代理和cglib实现代码详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下


  • Python用MyQR制作动态彩色二维码实例

    发布:2019-11-22

    MyQR是一个能够生成自定义二维码的第三方库,你可以根据需要生成普通二维码、带图片的艺术二维码,也可以生成动态二维码。这篇文章主要介绍了Python使用MyQR制作专属动态彩色二维码,需要的


  • JS中的 map, filter, some, every, forEach, for in, for of 用法

    发布:2020-03-09

    本文是小编给大家总结的关于javascript中的map, filter, some, every, forEach, for in, for of 用法,非常不错,具有参考借鉴价值,需要的朋友参考下吧


  • JS面试题比较难的内容

    发布:2020-07-09

    超过80%的候选人对下面这道JS面试题的回答情况连及格都达不到。这究竟是怎样神奇的一道JS面试题?他考察了候选人的哪些能力?对正在读本文的你有什么启示?


  • Node.js使用AngularJS的方法总结

    发布:2019-07-30

    这篇文章主要介绍了Node.js 使用AngularJS的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧


  • JS如何实现关键词高亮显示正则匹配功能

    发布:2020-01-27

    这篇文章主要介绍了JS实现关键词高亮显示正则匹配功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下


  • JS中将多个逗号替换为一个逗号的实现代码

    发布:2022-06-14

    为网友们分享了关于JS的教程,这篇文章主要介绍了JS中将多个逗号替换为一个逗号的实现代码,需要的朋友可以参考下


网友讨论