Заменить текст <li>изображением - PullRequest
Новая
       18

Заменить текст <li>изображением

0 голосов
/ 27 мая 2018

Как я могу заменить текст <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">';
}

1 Ответ

0 голосов
/ 27 мая 2018

Допустим, у вас есть такая структура: 

<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>
...