Javascript 在使用createElement（）生成的元素上添加事件和函数

我使用createElement/createTextNode创建了不同的元素段落，并将它们添加到正文中

我的问题是，我想创建那些divs链接，或者能够添加诸如onclick之类的事件，但显然没有HTML代码来实现这一点。只有javascript生成的对象

我的自动取款机代码：

for (i=0; i<10; i++){
   var newDiv = document.createElement("div");
   newDiv.className = "block";
    var heading = document.createElement("h2");
    var newContent = document.createTextNode(data[1][i]);
    heading.className="title";
    heading.appendChild(newContent);
    newDiv.appendChild(heading);
    var paragraph = document.createElement("p");
    var newContent2 = document.createTextNode(data[2][i]);
    paragraph.className="light";
    paragraph.appendChild(newContent2);
    newDiv.appendChild(paragraph);

    var currentDiv = document.getElementById("div1"); 
   document.body.insertBefore(newDiv, currentDiv);


  }

---

您可以将事件侦听器添加到刚刚创建的对象中。对象不必是HTML。请参见简单示例：

var someDiv=document.createElement'div'； var txt=document.createTextNode‘单击我’； someDiv.appendtxt； document.body.appendsomeDiv； var myFancyFunction=函数{ 提醒“你点击了我”； };

---

someDiv.addEventListener'click'，myFancyFunction 将元素添加到dom后，可以像选择其他元素一样选择它

//创建元素 var段落=document.createElement'p'； //给它一个身份证` 段落id=‘foo’； //将元素添加到`dom` document.body.appendment段； //添加侦听器 段落.addEventListener'click'函数{ this.innerHTML='已单击'； }; p{ 高度：20px； 填充：10px； 外形：1px实心bada55； } 您可以简单地调用JS生成的对象，甚至在它们被插入DOM之前，或者根本不被插入：

let div = document.createElement('div');

div.addEventListener('click', function(event) {
    // do something
});

// This will trigger a call of the registered click callback,
// regardless of whether the div is in the DOM:
div.dispatchEvent(new Event('click', {
    "bubbles": true,
    "cancelable": false,
}));

// To add it to the DOM, simply add it the way you wish:
document.body.appendChild(div);

允许您以计算方式触发事件，其效果等同于实际单击div

请注意上面示例中事件构造函数的用法

---

将它们添加到正文后，您可以像页面上的任何其他元素一样选择它们。您可以向元素添加属性，如id，以使选择它们更容易。不确定是什么问题？您可以将事件附加到以下创建的元素。createElement调用代码转储不是有用的答案。说你做了什么，为什么它有效，理想情况下参考更多信息…嗨@T.J.Crowder谢谢你的评论！你说得对！我正在做，谢谢，这真的很有帮助。我使用for循环创建不同的元素。我想我需要给他们分配一个ID，并给目标分配一个变量them@Kostis不，没有身份证！等等，我会检查你的代码并更新我的答案。啊，太好了，非常感谢。我花了很长时间才理解它，因为我对Javascript很陌生，但我现在明白了。我将在我的编辑器上测试它。无论如何，执行上面的getElementById的理由完全是零，而没有理由使用该id。您已经参考了段落.@T.J.Crowder True中的元素。在答案中添加了这一点。我会说，添加一个id并不一定是个坏主意。您可能需要稍后使用插件或其他东西来选择它。谁知道呢？不过，感谢您指出这一点，我们进行得很快，没有经过思考：