使用Javascript将div替换为图像

我正在尝试用Javascript制作一个记忆游戏。为此，我将20个

div

分布在5行中，其中4个

div

位于一行中，其中每行本身就是一个

div

。现在，我希望当我（用户）单击某个特定的

div

时，它的内容被替换为一个图像。在下面显示的代码中，我尝试用文本替换内容，但似乎不起作用。只有成功地将内容替换为文本，我才能尝试使用图像

const element1=document.getElementById（'element1'）；
const element2=document.getElementById（'element2'）；
const element3=document.getElementById（'element3'）；
const element4=document.getElementById（'element4'）；
const element5=document.getElementById（'element5'）；
const element6=document.getElementById（'element6'）；
const element7=document.getElementById（'element7'）；
const element8=document.getElementById（'element8'）；
const element9=document.getElementById（'element9'）；
const element10=document.getElementById（'element10'）；
const element11=document.getElementById（'element11'）；
const element12=document.getElementById（'element12'）；
const element13=document.getElementById（'element13'）；
const element14=document.getElementById（'element14'）；
const element15=document.getElementById（'element15'）；
const element16=document.getElementById（'element16'）；
const element17=document.getElementById（'element17'）；
const element18=document.getElementById（'element18'）；
const element19=document.getElementById（'element19'）；
const element20=document.getElementById（'element20'）；
element1.addEventListener（'单击'，函数（））{
element1.innerHTML=“”；
var h1=document.createElement（'h1'）；
h1.innerHTML=“你好世界”；
document.getElementById（'main'）.appendChild（h1）；//删除元素，然后在其位置添加另一个元素
})
element2.addEventListener（'单击'，函数（））{
element2.innerHTML=“Hello world”；//直接替换元素
})

@导入url（'https://fonts.googleapis.com/css2?family=Poppins&display=swap');
*{
保证金：0；
填充：0；
框大小：边框框；
}
.标题{
利润率：15px；
填充：10px；
}
.标题h2{
文本对齐：居中；
字体系列：“Poppins”，无衬线；
字体大小：30px；
/*位置：固定*/
字体大小：粗体；
}
.主货柜{
显示器：flex；
对齐项目：居中；
证明内容：中心；
边缘顶部：10px；
}
.元素{
宽度：175px；
高度：175px；
背景色：印度红；
利润率：20px；
光标：指针；
}

记忆游戏
记忆游戏

您可以使用JavaScript设置标记属性，就像您在

innerHTML中所做的那样：

var my_img = document.createElement("img");
my_img.src = "image.png";

（请记住用您实际需要的内容替换image.png）
请澄清，您希望在单击每个块时将其替换为
hello world

如果它是我当时认为的那样，那么首先将
innerHTML
更改为
innerText
（至少对于这个hello world），然后

通过使用
document.getElementById（'main'）
您指的是整个文档。
您不是这个意思吗

我从主容器授权


document.getElementById（“main”）.addEventListener（'click'，函数（e）{
常数tgt=e.target；
如果（！tgt.classList.contains（“element”））返回；
tgt.style.backgroundImage='url(https://via.placeholder.com/130/0000FF/808080?text=Hello+世界银行；
})
@导入url（'https://fonts.googleapis.com/css2?family=Poppins&display=swap');
* {
保证金：0；
填充：0；
框大小：边框框；
}
.标题{
利润率：15px；
填充：10px；
}
.标题h2{
文本对齐：居中；
字体系列：“Poppins”，无衬线；
字体大小：30px；
/*位置：固定*/
字体大小：粗体；
}
.主货柜{
显示器：flex；
对齐项目：居中；
证明内容：中心；
边缘顶部：10px；
}
.元素{
宽度：175px；
高度：175px；
背景色：印度红；
利润率：20px；
光标：指针；
}

记忆游戏
记忆游戏
您还可以在
.element
上循环，并使用其
id
调用图像以显示onclick

基本隐藏/显示示例


let element=document.querySelectorAll（'.element'）；
for（设i=0；i

@导入url（'https://fonts.googleapis.com/css2?family=Poppins&display=swap');
* {
保证金：0；
填充：0；
框大小：边框框；
}
.标题{
利润率：15px；
填充：10px；
}
.标题h2{
文本对齐：居中；
字体系列：“Poppins”，无衬线；
字体大小：30px；
/*位置：固定*/
字体大小：粗体；
}
.主货柜{
显示器：flex；
对齐项目：居中；
证明内容：中心；
边缘顶部：10px；
}
.元素{
宽度：175px；
高度：175px；
背景色：印度红；
利润率：20px；
光标：指针；
}

记忆游戏
element1.addEventListener('click',function() {
    element1.innerText = "";
    var h1 = document.createElement('h1');
    h1.innerText = "Hello world";
    document.getElementById('element1').appendChild(h1); // removing the element and then adding another element in its place
})