JS实现动态添加DOM节点和事件的方法示例
更新时间：2017年04月28日 09:47:24 作者：zxl0016
这篇文章主要介绍了JS实现动态添加DOM节点和事件的方法,涉及javascript事件响应及针对页面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程序设计有所帮助。
您可能感兴趣的文章:
相关文章
这篇文章主要为大家详细介绍了JS+CSS实现炫酷光感效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
这篇文章主要给大家介绍了关于利用原生js实现trigger方法的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-05-05
文件下载是最常见的流形式返回数据的应用场景之一,通过流形式返回文件内容,可以避免将整个文件加载到内存中,从而减少内存消耗,这篇文章主要介绍了前端实现获取后端返回的文件流并下载的三种方法,需要的朋友可以参考下2025-04-04
这篇文章主要为大家介绍了JavaScript 弱引用强引用底层示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
echarts报错:Error in mounted hook的解决方法
最近又遇到了写echarts的时候常遇到的一个错误,这篇文章主要给大家介绍了关于echarts报错:Error in mounted hook: “TypeError: Cannot read properties of undefined (reading ‘init‘)“的解决方法,需要的朋友可以参考下2022-07-07
这篇文章主要为大家详细介绍了微信小程序中根据字母选择城市的相关方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
这篇文章主要为大家详细介绍了让编辑器支持word复制黏贴、截屏的js代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
这篇文章主要为大家详细介绍了javascript实现查询商品功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
下面小编就为大家分享一篇利用JavaScript的%做隔行换色的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2017-11-11
一直用document.write()方法向浏览器中显示数据用，把它当做Alert()使用， 看来这样用有些大材小用了，下面说说它的主要用处。2014-05-05
最新评论