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

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:使用已设置的事件处理程序动态生成一些 div:

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:向包含 clickable-div 类的所有 div 添加事件处理程序

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

jQuery 比用纯 JS 编写的任何东西都快得多。