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

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

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

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

JS：避免修改“.innerHTML”

3 个答案: