Question

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

我的问题是我想制作那些div链接或者能够添加诸如onclick之类的事件，显然没有HTML代码可以做到这一点。只是javascript生成的对象。

我的代码atm：

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


  }

Answer 1

您可以将事件侦听器添加到刚刚创建的对象中。该对象不必是HTML。 Read more about adding event listeners并查看简单示例：

＆＃13;

var someDiv = document.createElement('div');
var txt = document.createTextNode('click me');
someDiv.append(txt);
document.body.append(someDiv);

var myFancyFunction = function() {
    alert('you clicked me');
};

someDiv.addEventListener('click', myFancyFunction);

＆＃13;

在您的代码之后

更新，您可以为动态创建的对象添加事件侦听器。您还可以在同一事件上添加不同的功能。在这种情况下，它对于两个元素/对象都具有相同的功能..玩这个:(我将数据更改为＆＃34;虚拟数据＆＃34;因为没有数据）

＆＃13;

var myClick = function(event) {
    alert(event.target.innerHTML);
};

for (i=0; i<10; i++){
  var newDiv = document.createElement("div");
  newDiv.className = "block";
  var heading = document.createElement("h2");
  var newContent = document.createTextNode('dummy data1 index: ' + i);
  heading.className="title";
  heading.appendChild(newContent);
  newDiv.appendChild(heading);
  var paragraph = document.createElement("p");
  var newContent2 = document.createTextNode('dummy data2 index: ' + i);
  paragraph.className="light";
  paragraph.appendChild(newContent2);
  newDiv.appendChild(paragraph);

  var currentDiv = document.getElementById("div1"); 
  document.body.insertBefore(newDiv, currentDiv);

  heading.addEventListener('click', myClick);
  paragraph.addEventListener('click', myClick);

}

＆＃13;

Answer 2

将一个元素添加到dom后，您可以像任何其他元素一样选择它。

＆＃13;

// Create the element
var paragraph = document.createElement('p');

// Give it an `id`
paragraph.id = 'foo';

// Add the element to the `dom`
document.body.appendChild(paragraph);

// Add the listener
paragraph.addEventListener('click', function() {
    this.innerHTML = 'It was clicked';
});

＆＃13;

p {
  height:20px;
  padding:10px;
  outline:1px solid #bada55;
}

＆＃13;

在上面的示例中，我添加了id。如果由于某种原因你需要重新选择元素，它可能会更容易。

Answer 3

你可以简单地在JS生成的对象上调用addEventListener，甚至可以在它们插入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);

EventTarget.dispatchEvent允许您以计算方式触发事件（具有与实际点击div相同的效果）
请注意上面示例中的事件构造函数的browser compatibility。

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

3 个答案: