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>
(资源库 www.zyku.net)
您可能感兴趣的文章
- 06-26highlightjs网页代码高亮插件调用方法
- 05-10JS - 获取文件后缀,判断文件类型(比如是否为图片格式)
- 05-10js中!和!!的区别与用法
- 05-10js实现文章目录索引导航(table of content)
- 05-10JS实现单张或多张图片持续无缝滚动的示例代码
- 05-10js根据后缀判断文件文件类型的代码
- 05-10JS端基于download.js实现图片、视频时直接下载而不是
- 04-02CentOS安装Nodejs教程
- 02-11JS操作剪贴板代码详解
- 01-04帝国CMS页面JS调用登录状态loginjs.php中获取会员头像
- 10-27网易云音乐在哪里听小说
- 07-05Linux lndir命令
- 01-12武汉养老-武汉养老应用软件功能介绍
- 01-11对口直招-对口直招应用软件功能介绍
- 10-29oppo手机怎样关闭触摸声音
- 02-14华为mate4桌面锁定布局功能开启与关闭
- 03-21一加9查看农历方法
- 01-18浅谈兔子-浅谈兔子应用软件功能介绍
- 01-11换机传数据-换机传数据应用软件功能介
- 01-12海南自贸港-海南自贸港应用软件功能介
最近更新
阅读排行
猜你喜欢
- 04-13荣耀v40轻奢版锁屏方法
- 12-15CentOS找回root用户登录密码的方法
- 01-18悟空随手答-悟空随手答应用软件功能介
- 02-24一加9r天气语音播报设置方法
- 10-222021支付宝双11花呗金翻翻卡怎么玩
- 01-09视频字幕制作大师-视频字幕制作大师应
- 02-21DedeCMS模板调用标签之首页标签大全
- 11-03QQ浏览器怎么屏蔽首页资讯图片
- 01-12博雅小学堂-博雅小学堂应用软件功能介
- 02-10新手必备的Python实用技巧和工具