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>

用图像替换<li>的文本

1 个答案: