js如何动态添加div，动态添加class并且为该div绑定点击事件

最新推荐文章于 2023-07-16 23:21:02 发布

jingjinglove-

最新推荐文章于 2023-07-16 23:21:02 发布

阅读量1.2w

点赞数 4

CC 4.0 BY-SA版权

文章标签： js

本文链接：https://blog.youkuaiyun.com/m0_46613478/article/details/106377846

本文介绍了如何使用JavaScript动态创建div，通过appendChild()方法添加到DOM中，并详细讲解了如何为新创建的div设置样式、添加class和id。同时，文章还阐述了如何利用addEventListener()方法为这些动态生成的div绑定点击事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

动态添加div

知识点：appendChild（）方法

appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。具体的用法可以参考
W3C

1、首先用createElement创建一个div

里面的××必须是一样的。

  var ×× = document.createElement("div"); //创建一个div

2、给div添加样式

 ××.style.cssText = "样式";

3、给div添加class和id

 ××.className = "class名";  //给div添加class名
 ××.id = 'id名';  //给div添加id名

4、使用appendChild() 方法向div的末尾添加新创建的div

 div.appendChild(××);

5、给div追加一个文本

var text = document.createTextNode("文本内容");  //createTextNode  创建一个文本

 ××.appendChild(text);  //将文本追加到div里面

动态添加的div如何绑定点击事件

addEventListener（）方法用于向指定元素添加事件句柄，具体用法可以参考W3C

 ××.addEventListener("click",function(e){
       //动态改变iframe的src属性
       document.getElementsByTagName("iframe")[0].src=s.body.url; 
  });

整体代码

   var button = document.createElement("div"); //创建一个div
    //给这个div添加样式
   button.style.cssText = "width:100%;margin: 20px 0;padding: 10px 0;border-radius: 50px;font-size: 16px;background: #e4cc78;";
   button.className = "btnclass";  //给div添加class名
   button.id = 'continuePay';  //给div添加id名
   var text1 = document.createTextNode("继续支付");  //创建一个文本
   div.appendChild(button);  //向div的末尾添加新创建的div
   button.appendChild(text1);  //把文本添加到新创建的div的末尾

  //给新创建的div添加点击事件
  //addEventListener() 方法用于向指定元素添加事件句柄
  button.addEventListener("click",function(e){
       console.log("微信链接："+ s.body.url);
       document.getElementsByTagName("iframe")[0].src=s.body.url; //动态改变iframe的src属性
  });