JS：避免修改".innerHTML"

Question

我有一些<div>，我一直在添加新对象。这些对象分配有侦听器。

问题是当我使用 .innerHTML 添加这些新对象时，以前的侦听器会丢失。

是否可以创建一个表示HTML对象的JS字符串，并将其作为子对象附加而不.innerHTML += ...？

我举个例子：

var line_num = 0;
function addTextLine(line) {
    var lineId = "line_" + line_num;
    var lineHtml = "<p id = '" + lineId + "'>" + line + "</p>";
    document.getElementById("some_div_id").innerHTML += lineHtml;
    document.getElementById(line_id).addEventListener("click", function() {
        alert("hello");
    });
    line_num += 1;
}

修改some_dive_id的innerHTML，会删除旧<p>对象的事件侦听器。

那么 - 是否可以将<p> HTML 字符串转换为对象，从而在不修改其.innerHTML的情况下将其附加到some_div_id？

Answer 1

你的问题是innerHtml擦除然后重新创建当前的DOM节点;这就是你失去事件侦听器的原因。您可以使用 insertAdjacentHtml 插入您的 HTML

 document.getElementById("some_div_id").insertAdjacentHTML('afterbegin', lineHtml );

afterbegin参数确保插入的 HTML 将是当前节点的子节点。

在此处查找更多信息： Element.insertAdjacentHTML((

Answer 2

创建元素并追加它

var p = document.createElement("p");
p.innerHTML = line;
p.id = line_id; // or p.setAttribute("id", line_id);
p.addEventListener("click", function(){ });
document.getElementById("foo").appendChild(p);

另一种选择是创建一个元素，然后设置 innerHTML 并从那里读取元素。(第一个选项更好(

var div = document.createElement("div");
div.innerHTML = lineHtml;
//now you can either select the children and append it or append the div.

Answer 3

使用element.appendChild().

您的代码不起作用，因为每次使用 innerHtml += 'Something' 时，您都会删除该特定元素中的任何内容并插入带有添加字符串的旧内容。

相反，您可以使用函数创建元素并将其附加到父元素。

重写代码应该是：

var line_num = 0;
function addTextLine(line) {
  var line = document.createElement('p');
  line.id = "line_" + line_num;
  line.textContent = line;
  line.addEventListener("click", function() {
        alert("hello");
    });
  document.getElementById("some_div_id").appendChild(line);
  line_num += 1;
}