JSFiddle - React, Tailwind, and code Playground

HTML

<div id="youso1-container">
  <!-- ここに要素①が表示されます -->
</div>
<div id="youso2-container">
  <p>要素②</p>
</div>

JavaScript

const YOUSO1 = document.querySelector('#youso1-container');
const YOUSO2 = document.querySelector('#youso2-container');

// 要素②として表示させたいHTMLをかく
let youso2 = `
  <p>要素②</p>
`

// わかりやすくするために、動作を遅延させる用
window.addEventListener('load', () => { setTimeout(showOrHide2, 2000) });

// ⭐️本番用
// window.addEventListener('load', showOrHide2);

function showOrHide2() {
  if (YOUSO1.childElementCount) { // 要素①-containerに子要素がある場合
    YOUSO2.insertAdjacentHTML('beforeend', youso2); // 要素②を挿入
  } else { // 要素①に子要素がない場合
    while (YOUSO2.firstChild) {
      YOUSO2.removeChild(YOUSO2.firstChild); // 要素②-containerの子要素を全て削除
    }
  }
}