При нажатии на кнопку, появляется новый блок

Question

Нужно чтобы при нажатии на кнопку исчез этот блок(container__window-right) и появился такой же. Чтобы я мог написать туда форму. Или написать создать новый контейнер и туда уже ввести мои классы Не могу разобраться с innerhtml.спасибо

.content {
    display: flex;
    position: relative;
    background-color: #fefefe;
    margin: 15% auto;
    border: 1px solid #888;
    width: 800px;
    height: 460px;
    /*z-index: 99999;*/
}

.container__window {
    position: relative;   
}
/****************
ОКНО ЛЕВАЯ ЧАСТЬ
****************/

.container__window:first-child{ 
    background-color:yellow;
    width: 55%;
}

/****************
ОКНО ПРАВАЯ ЧАСТЬ
****************/
.container__window:last-child { 
    width: 45%;
    display: flex;
    justify-content: center;
}
.container__window-right{
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: auto;

    width: 230px;
    height: 250px;
}

<div class="content">
        <div class="container__window">
          <!--Окно левая часть-->
        </div>
          <!--Окно правая часть-->
        <div class="container__window">
          <div class="container__window-right">
            <a class="spin__button" type="button" onclick="spin();" id="btn_rodar" href="#"><img src="#" alt="Кнопка"></a>  
          </div>  
        </div>

Answer 1

document.getElementById(`btn_rodar`).addEventListener(`click`, e => {
  e.target.parentElement.innerHTML = `<form><input type="text" value="Моя новая форма"></form>`;

});

.content {
  display: flex;
  position: relative;
  background-color: #fefefe;
  margin: 15% auto;
  border: 1px solid #888;
  width: 800px;
  height: 460px;
  /*z-index: 99999;*/
}

.container__window {
  position: relative;
}


/****************
ОКНО ЛЕВАЯ ЧАСТЬ
****************/

.container__window:first-child {
  background-color: yellow;
  width: 55%;
}


/****************
ОКНО ПРАВАЯ ЧАСТЬ
****************/

.container__window:last-child {
  width: 45%;
  display: flex;
  justify-content: center;
}

.container__window-right {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: auto;
  width: 230px;
  height: 250px;
}

<div class="content">
  <div class="container__window">
    <!--Окно левая часть-->
  </div>
  <!--Окно правая часть-->
  <div class="container__window">
    <div class="container__window-right">
      <a class="spin__button" type="button" id="btn_rodar" href="#"><img src="#" alt="Кнопка"></a>
    </div>
  </div>

БЛОГ НА HUSL

При нажатии на кнопку, появляется новый блок

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