将原始div替换为相同的ID:replaceChild()，结果不正确

Question

以下是我的代码，它可以工作，但不太实用：

var blank1 = document.getElementById("blank1");
var this_image_filename = "/rgsi/images/poi-" + image_id + "-1--4.jpg";
blank1.innerHTML = "<div id='blank1' onclick=displayImg('" + this_image_filename + "') >1</div>";

问题是，如果你在Chrome中使用inspect元素，你会得到：

<div id="blank1">
<div id="blank1" onclick="displayImg('/rgsi/images/poi-64-1--4.jpg')">1</div>
</div>

这一点都不好。

我尝试使用replaceChild()，如下问题所列：

如何使用Javascript替换DOM元素？

但我一直得到：

未捕获NotFoundError:未能在"Node"上执行"replaceChild"：新的子元素为null

所以问题是：正确执行此操作的最简单方法是什么

欢迎提供任何意见。

Answer 1

您可以在元素内部重新创建元素。

我想你的意思是：

var blank1 = document.getElementById("blank1");
var this_image_filename = "/rgsi/images/poi-" + image_id + "-1--4.jpg";
blank1.onclick = function() { displayImg( this_image_filename ); }
blank1.innerHTML = "1";

Answer 2

您必须使用UNIQUE id。

var blank1 = document.getElementById("blank1");
var this_image_filename = "/rgsi/images/poi-" + image_id + "-1--4.jpg";
blank1.innerHTML = "<div id='blank1_small' onclick=displayImg('" + this_image_filename + "') >1</div>";

还有html。。。

<div id="blank1">
<div id="blank1_small" onclick="displayImg('/rgsi/images/poi-64-1--4.jpg')">1</div>
</div>

这可能是正确的，但正如@adeneo所说，只需更改一个属性，就可以在JS 中设置

Answer 3

这就成功了：

document.getElementById("blank1").onclick = function() {
var this_image_filename = "/rgsi/images/poi-" + image_id + "-1--4.jpg";
displayImg(this_image_filename);          
}