Question

我试图在点击时修改div的innerHTML。我动态生成了一个div数组，我想专门访问用户点击的表。

我尝试在JavaScript代码中动态设置表的ID：

(for var i=0;i<array.length;i++){
  var IDvalue = "foo";
  // append table to HTML string.
  html += "<div onclick='modifyInnerHTML(\"" + IDvalue + "\")'>...</div>";
  var divs = document.getElementsByTagName('div');
  divs[divs.length-1].id=array[i].IDvalue;
}

然后在modifyInnerHTML()我按ID访问元素：

function modifyInnerHTML(id){
  document.getElementById(id).innerHTML+="Add an update";
}

虽然我认为这段代码应该可以正常运行，但它正在document.getElementById(id)函数中断，我意识到div的id不是动态设置的。对于为什么会出现这种情况有什么想法或有更快的方法可以做到这一点？

提前致谢！

Answer 1

您最好使用DOM操作库，例如jQuery。

至于事件，jQuery将允许您以更可靠的方式定义它们。你应该避免在属性中定义事件处理程序，最好使用对元素的引用将它们附加到DOM，或者更好的是，jQuery elemnt集。

案例1：使用已设置的事件处理程序动态生成一些divs：

for(var i = 0; i < 10; ++i) {
    $("<div>")
        .addClass("clickable-div")
        .html("click me!")
        .on("click", function() {
            $(this).html("You clicked me!");
        })
        .appendTo("body");
}

案例2：向包含类div的所有clickable-div添加事件处理程序

$("div.clickable-div").on("click", function() {
    $(this).html("You clicked me!");
});

jQuery比完全用JS编写的任何东西都更快。

修改JavaScript生成的HTML代码中的内容

1 个答案: