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

最新推荐文章于 2024-05-28 00:30:00 发布
最新推荐文章于 2024-05-28 00:30:00 发布
阅读量1.9w 收藏 5
点赞数
分类专栏： JavaScript 文章标签： button input table function

 

<html>
<head>
<script language="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>
</head>
<body>
<table id="tb">
   <tr>
    <td>
     添加节点的地方
    </td>
   </tr>
</table>
<table>
   <tr>
    <td>
     <input type="button" value="添加节点" οnclick="addEl()" />
    </td>
    <td>
     <input type="text" id="txt"/>
    </td>
   </tr>
</table>
</body>
</html>

只是简单写了一个例子，具体的按照自己的业务修改就可以了。

zxl0016
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js 给动态生成的DOM绑定事件
05-06
web前端的朋友们,经常会遇到给由后台返回的数据遍历生成的DOM绑定事件,但是总是绑定不上,那是因为把事件直接绑定到了动态生成的DOM上了,正确的方式是利用事件冒泡给其父元素绑定，这样才能解决问题的哦！
增加在节点上的事件
鹿惊的博客
01-18 446
listeners: { 'selectionchange': function (view, rs,node) { }, 'beforeitemexpand': function (node, eOpts)// 节点展开监听 { }, 'nodecollapse': function (node, eOpt
Javascript 创建新节点 document.createElement()
最新发布
大剑师兰特的GIS世界
05-28 1157
在JavaScript中，创建新节点是DOM操作的重要组成部分，它允许你动态地向文档中添加内容。以下是创建新节点的详细说明、示例代码、注意事项以及常见应用场景。
js为动态创建的元素添加事件
zhm0303的博客
03-18 5384
html中直接生成的元素，添加事件，我们都知道，但是如何为一个动态生成的元素添加事件呢，jquery中的live方法可以做到这一点 具体实现可以在demo中看到 添加事件 // js原生实现 // var btn=document.getElementById("btn"); // btn.onclick=function(){ /
原生JS获取元素，添加事件
dianlupeng4187的博客
08-15 1203
// 获取所有input let inputAll = document.querySelectorAll('.table_input input'); this.iddata = inputAll; // 向上 =38 if (item.keyCode === 38) { newIndex -= 8; if (inputAll[newIndex]) { inputAl...
JS的DOM事件操作
m0_53438024的博客
12-07 414
DOM事件的获取和相应的操作
Javascript 动态添加节点（thinking in DOM）
weixin_30325487的博客
08-10 138
test.html & example.js文件说明了传统技术：document.write & innerHTML的用法 test.html: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title> Test </titl...
js怎样向动态列表中插入节点
weixin_42074004的博客
10-29 345
js动态添加子节点
不如养猪！
10-31 1万+
function addElement_pic(i,imgsrc,website,landingPage){ //获得ul var ul = document.getElementById("hot_web_pic"); //创建li var li = document.createElement("li"); //给li设置属性 　　 li.setAttrib
原生js中如何添加dom元素
热门推荐
zl13015214442的博客
05-22 3万+
1. appendChild() 概念：把要添加的节点添加到指定父级里面的最后面，所以也叫追加。 使用方式：fatherdom.appendChild( insertdom )。 兼容性：所有浏览器都支持此方法。 2. insertBefore() 概念：把要插入的节点添加到指定父级里面的指定节点之前。 使用方式：fatherdom.insertBefore( insertdom，chose...
js之DOM事件
m0_61547956的博客
04-22 3330
元素创建事件的两种方式 传统方式 on开头的事件，事件的唯一性，同一个元素同一个事件只能设置一个处理函数，后面的覆盖前面的，下列代码只弹出2。 var btns = document.querySelectorAll('button'); btns[0].onclick = function() { alert(1); } btns[0].onclick = function() { alert
带你彻底学会JS DOM技术之创建，插入元素
大河之犬的博客
10-06 4882
所谓的“动态DOM”，指的是使用JavaScript创建的元素。来创建一个文本节点，然后可以将元素节点与文本节点“组装”成我们平常看到的“有文本内容的元素”。方法把已经创建好的“有内容的strong元素”插入到div元素中，这时才会显示出内容。动态创建了一个strong元素，但是此时strong元素是没有内容的。//将strong元素插入div元素（这个div在HTML已经存在）方法将一个新元素插入到父元素中的某一个子元素“之前”A表示父元素，B表示新子元素。把一个新元素插入到父元素的内部子元素的“末尾”
Dom 动态创建节点
__盛某人的博客
01-28 518
创建一个元素节点: 1). createElement(“标签名”): 按照给定的标签名创建一个新的元素节点. 方法只有一个参数：被创建的元素节点的名字, 是一个字符串. 方法的返回值：是一个指向新建节点的引用指针. 返回值是一个元素节点, 所以它的 nodeType 属性值等于 1. 新元素节点不会自动添加到文档里, 它只是一个存在于 JavaScript 上下文的对象. 创建一个文本节...
JS为循环动态生成的节点添加点击事件
wisher的博客
09-01 1万+
举例代码如下： var a=1;  for(var i=0;i<7;i++){   var input=document.createElement("input"); input.className="cd"; input.value="查看详情"; input.type="button"; } 这时想要为input标签添加一个点击事件
动态创建DOM元素的三种方式
阿甘正传
09-16 9861
动态创建DOM元素的三种方式 document.write(); 不常用，因为容易覆盖原来的页面。 innerHTML = (); 用的比较多。绑定属性和内容比较方便。(节点套节点) document.createElement(); 用得也比较多，指定数量的时候一般用它。 1、方式一： document.write(); 这种方式的好处是：比较随意，想创建就创建，可以直接在wr...
DOM介绍
weixin_33809981的博客
05-29 102
什么是DOM DOM：文档对象模型。DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。 DOM就是由节点组成的。 解析过程 HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树，getElementById是获取内中DOM上的元素节点。然后操作的时候修改的是该元素的属性。 DOM树（一切都是节点）...
js——添加或删除元素节点（append 和 innerHtml） 节点访问关系 节点属性
肖的博客
08-24 1万+
1、append原理： //添加 var para=document.createElement('p');//创建新的p标签 var node=document.createTextNode('这是一个段落');//创建一个文本节点 para.appendChild(node);//向p追加此文本节点 para.className=&amp;amp;amp;quot;lucky&amp;amp;amp;quot;;//向...
[WebKit]为JavaScript Binding添加新DOM对象的三种方式及实作
求索
06-06 1万+
转载请注明出处:http://blog.csdn.net/horkychen  一．基础知识 首先WebKit IDL并非完全遵循Web IDL，只是借鉴使用。WebKit官网提供了一份说明（WebKitIDL），比如Web IDL称"operation”(操作), 而WebKitIDL称为"method"(方法)， 另外Web IDL也不像WebKitIDL那样将属性和参数分开。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值