我使用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);
}
答案 0 :(得分:1)
您可以将事件侦听器添加到刚刚创建的对象中。该对象不必是HTML。 Read more about adding event listeners并查看简单示例:
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;因为没有数据)
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;
答案 1 :(得分:0)
将一个元素添加到dom
后,您可以像任何其他元素一样选择它。
// 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
。如果由于某种原因你需要重新选择元素,它可能会更容易。
答案 2 :(得分:0)
你可以简单地在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。