js动态添加html元素绑定事件,JS实现动态添加DOM节点和事件的方法示例

本文实例讲述了JS实现动态添加DOM节点和事件的方法。分享给大家供大家参考，具体如下：

运行效果图如下：

完整实例代码如下：

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Js(DOM)动态添加节点和事件

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);

}

添加节点的地方

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

js动态添加html元素绑定事件,JS实现动态添加DOM节点和事件的方法示例相关推荐

jQuery给动态添加的元素绑定事件的方法
jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定.在1.7版本以前使用live.但是在1.8版本以后推荐使用on.这 ...
jQuery 为动态添加的元素绑定事件
在使用jquery的方式为元素绑定事件时,我经常使用bind或者click,但这只能为页面已经加载好的元素绑定事件.像需要用ajax的方式请求远程数据来动态添加页面元素时,显然以上几种绑定事件的方式是 ...
动态添加html元素绑定事件,关于javascript：jQuery如何将onclick事件绑定到动态添加的HTML元素...
本问题已经有最佳答案,请猛点这里访问. 我想将onclick事件绑定到用jquery动态插入的元素但它从不运行绑定函数.如果您能指出这个示例为什么不起作用,以及如何使它正常运行,我将非常高兴: /p ...
Python 3、selenium/执行js命令显示隐藏元素，封装js工具类
为什么需要js? 我们需要执行函数,但是实现成本很高或很难甚至无法实现事件的时候,可以直接通过js命令调用页面上有些元素无点击事件,不可点击等,调用js直接实现效果即可还有种种原因导致,没达到我们 ...
js list删除指定元素_删除js数组中的指定元素，有这两步就够了
js数组是js部分非常重要的知识,有时我们有这么个需求js数组删除指定元素,先定义一个函数来获取删除指定元素索引值,然后用js数组删除的方法,来删除指定元素即可,就两步不难,很简单. 1.JS的数组对 ...
JavaScript基础11-day13【正则表达式(量词、语法、转义字符、元字符)、DOM(节点、事件)、图片切换】
学习地址: 谷粒学院--尚硅谷哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
JavaScript监听DOM节点变化事件
JS监听页面DOM节点的变化 DOMSubtreeModified DOMNodeInserted DOMNodeRemoved DOMNodeInsertedIntoDocument DOMNode ...
js中给html元素追加属性,JS为元素添加自定义属性
JS 除了可以操作 HTML 元素现有的属性外,还可以对 HTML 元素自定义属性以及对这些自定义的属性进行读.写操作.JS 可以为任何 HTML 元素自定义任意的属性(属性名必须符合标识符规范). ...
JavaScript动态生成元素绑定事件时的一些问题、解决与思考
先上结论: 在用js给动态生成的dom元素添加事件时会遇到很多坑. 坑1:使用了 queryselectorall方法获取元素,这个方法获得的是一个静态的Nodelist伪数组,这意味着之后无论你如何 ...

js动态添加html元素绑定事件,JS实现动态添加DOM节点和事件的方法示例

js动态添加html元素绑定事件,JS实现动态添加DOM节点和事件的方法示例相关推荐

最新文章

热门文章