Замена содержимого при клике

Question

Подскажи пожалуйста как можно реализовать: есть div

let elem =  document.body.appendChild(document.createElement('div'));
elem.innerHTML = 'нажми меня';

при нажатии elem удаляется, а на его месте появляется картика, в свою очередь при нажатии на картинку она удаляется и вновь появляется elem

elem.onclick = function ( event ) {
            console.log(event.target.tagName);
            if ( event.target.tagName == 'IMG' ) this.firstChild.remove()
            else {
                let img = event.target.appendChild (
                    document.createElement ( "img" )
                );

попытался решить но мой вариант не совсем корректно работает

Answer 1

let root = document.body.appendChild(document.createElement('div'));

let text = document.createTextNode("Нажми на меня");
root.appendChild(text);

let img = document.createElement("img");
img.src = "https://gyazo.com/3e93e2329386c822cb1aac3236a87cdf.png";

// И картинка, и текст созданы и сохранены в отдельных переменных,
// Чтобы можно было проверять, кто сейчас находится в блоке.

root.addEventListener("click", function() {
  let child = this.firstChild;
  
  this.removeChild( child );
  // Удаляется из блока, но ссылка на объет еще хранится в переменных (text / img)
  
  this.appendChild( child === img ? text : img );
  // Первый дочерний элемент равен img ? вставить text : иначе img.
});

Answer 2

Зачем удалять, потом вновь создавать, если можно просто скрывать и показывать.

function show(id){
    document.getElementById(id).style.display = "block";
}
function hide(id){
    document.getElementById(id).style.display = "none";
}

#block{
    width: 400px;
    height: 400px;
    background-color: red;
}
#img{
    display: none;
}

<div id="block" onclick="show('img');hide('block')">Click me!</div>
<img src="https://www.google.com/logos/doodles/2020/december-holidays-days-2-30-6753651837108830.5-s.png" id="img" onclick="show('block');hide('img')" alt="картинка">

БЛОГ НА HUSL

Замена содержимого при клике

Ответы (2 шт):