将 的文本替换为<li>图像

Question

调用事件时，如何将<li>的文本替换为图像？ 当点击<li>时，我想在这个地方来一张图片。我尝试了innerHTML但没有结果。 知道吗？

<ul onclick="myFunction(event)">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
function myFunction(event){
var t;
if(event.target){
t = event.target;
}else{
t = event.srcElement;
}
t.innerHTML = '<img src="img.png">';
}

Answer 1

假设您有一个这样的结构：

<ul>
<li>Some Text</li>
</ul>

可以使用以下脚本作为事件侦听器函数：

document.querySelector("li").addEventListener("click", function(event) {
let image = document.createElement("IMG");
image.src = "//placehold.it/20"; // example image
this.innerText = ""; // remove text
this.append(image); // append image to the li
});

此代码的实际操作：

document.querySelector("li").addEventListener("click", function(event) {
let image = document.createElement("IMG");
image.src = "//placehold.it/20"; // example image
this.innerText = ""; // remove text
this.append(image); // append image to the li
});

<ul><li>Some Text</li></ul>