Javascript 在动态创建的节点中更改图像

最后，我希望用户能够单击节点，显示一个图像选择，并用他们的选择填充节点。不过，现在我只是想测试如何使用不同的图像onclick更改表创建时放置在节点中的图像。我的逻辑模糊吗

for (r = 0; r < howOften; r++) {
        row = table.insertRow(-1);

        for (c = 0; c < numDays; c++) {
            col = row.insertCell(-1);
            img=new Image();
            img.src="../www/images/TEST.png";
            col.appendChild(img);

                img.onclick = function() {
                image1= new Image();
                image1.src="../www/images/TEST2.png";
                img=image1;     
                };
            }
        };
    document.getElementById('holdTable').appendChild(table);
};

for（r=0；r

将img附加到col时，会附加变量img“指向”的图像。 如果（当）您稍后更改变量img以指向另一个值，它不会更改附加到列中的内容。您可以通过添加

img='hello'来测试它在您添加它之后-您将发现img被添加，而不是“hello”

在onclick函数中，当您将img更改为“指向”image1时，它不会更改附加到col的图像

如果要真正更改附加到dom的内容，需要删除图像并在其位置插入另一个对象

但幸运的是，您需要的是一个具有另一个src的图像，因此您不需要从dom中删除该图像并插入另一个图像-您只需要更改已经存在的图像的src。
要做到这一点，您应该在onclick函数中使用“this”变量（指向col中的图像）并更改其“src”

即

image1
永远不会插入到DOM中，并且为
img
变量指定新值不会更改现有的DOM节点。您需要将新的
src
分配给现有的DOM节点。（同时，您似乎正在使用。）使用
document.createElement（'img'）
创建图像。因此，如果我理解正确，我是针对节点而不是图像？我试过了，效果非常好。我仍然有点不确定为什么。我喜欢在继续之前试着去理解。
img.onclick = function() {
    // wrong:
    //var image1= new Image();
    //image1.src="../www/images/TEST2.png";
    //img=image1;  

    // right:    
    this.src = '../www/images/TEST2.png';
};