Как заменить div через несколько секунд?

Question

[vladislav997]

Подскажите, как заменить div через несколько секунд после загрузки страницы?

Пример:

# блок при загруке
<div id="block_1">content 1</div>

# блок на который замениться после истечения 3х секунд например
<div id="block_2">content 2</div>

Comments

[eugenedrvnk]

setTimeout(() => {
  let block1 = document.querySelector('#block_1')
  let block2 = document.querySelector('#block_2')
  block1.innerHTML = block2.innerHTML
}, 3000)

[vladislav997]

eugenedrvnk, нужно чтобы первый пропадал, а второй вместо него появлялся, может через display none?

[Шохрух Шаймардонов]

vladislav997, можно

Answer 1

[Сергей Соколов]

{
  const el1 = document.getElementById("block_1");

  // второй div, предположу, пока не присутствует в разметке
  // поэтому его надо создать:
  const el2 = document.createElement("div");
  el2.id = "block_2";
  el2.innerText = "content 2";

  // собственно, замена:
  setTimeout(() => el1.parent.replaceChild(el2, el1), 3e3);
  
  // или то же более современно, не работает в IE:
  setTimeout(() => el1.replaceWith(el2), 3e3);
}

Comments

[AlexandrNikolaichev]

сейчас есть `replaceWith`

[Сергей Соколов]

AlexandrNikolaichev, спасибо! добавил вариант.