Si hago clic en el icono de búsqueda, se abrirá el botón Atrás y la barra de búsqueda. Nuevamente hago clic en el botón Atrás, se abrirá el ícono de búsqueda

Probé con html interno.

Si hago clic en el icono de búsqueda, utilizo innerhtml para mostrar el botón Atrás y la barra de búsqueda. Pero si hago clic en el botón Atrás, ¿cómo mostrar el icono de búsqueda?

 container.insertAdjacentHTML('afterbegin', ` <header> <div id="chat-icon"> <div class="search"><i class="fas fa-search"></i></div> <div id="chat"><i class="far fa-edit"></i></div> </div> </header> <div id="group-list"></div>`); container.querySelector('header #chat-icon #chat').addEventListener('click', async() => { this.chat.container.querySelector('.groups').remove(); this.chat.container.insertAdjacentElement('afterbegin', this.createGroup.container); await this.createGroup.load(); }); container.querySelector('header .search').addEventListener('click', async() => { this.chat.container.querySelector('header .search').innerHTML = ` <div class="heading"> <div id="back-button"><i class="fa fa-arrow-left"></i></div> <div id="search-bar"></div> </div>` })