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（）：

How to replace DOM element in place using Javascript?

但我一直在接受：

Uncaught NotFoundError：无法在'Node'上执行'replaceChild'：新的子元素为空。

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

任何输入都表示赞赏。

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

用相同的ID替换原始div：replaceChild（）没有给出正确的结果

3 个答案: