◆ 要素の子要素をすべて置き換えられる
◆ これまで innerHTML = "" で全部消してから append したりしていたけどその手間がなくなった

いつものように console でコードを入力していると補完候補に replaceChildren なるものを見かけました
名前的にもしかして と思い使ってみると予想通り 要素の子要素を全部削除して引数で渡したものに置き換えてくれました

<div id="container">
aaa
<span>bbb</span>
ccc
</div>

という DOM で

document.getElementById("container").replaceChildren(document.createElement("button"))

を実行すると

<div id="container">
<button></button>
</div>

になります

これまで

elem.innerHTML = ""
elem.append(div)

のように innerHTML を使って全部消してから append したりしていましたが その手間がなくなりました

また 引数は可変長引数で appned と同じように複数の要素や文字列を指定できます

elem.replaceChildren(div1, div2, p, "text", button)

Chrome 以外でも Safari 14 や Firefox 78 以降は使えるので もう使っていっても大丈夫そうです

whatwg の仕様:
https://dom.spec.whatwg.org/#dom-parentnode-replacechildren