替换文本 <li> 与图像

Question

How can i replace the text of a <li> with an image when an event is called? When the <li> is clicked i want to come an image at this place. I tried with innerHTML but no result. Any idea?

<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

Let's say you have a structure like this:

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

You can use the following script as an event listener function:

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

This code in action:

 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>