DOM

：

：

Element.replaceChildren() メソッド

　編集：2022.09.25 by T.A.

[Edge]。→、

element の子ノードを指定の Node や DOMString に置き換えます。

構文
element.replaceChildren(...nodesOrDOMStrings)
element Element。
nodesOrDOMStrings 置き換える Node や DOMString オブジェクト。複数指定の場合はカンマ「,」で区切って指定してください。

空指定の場合、element の子ノードは空になります。

戻り値

例外
HierarchyRequestError ／DOMException
ノード ツリーの制約に違反した場合。
例

replaceChildren() は、すべての子のノードを空にするための非常に便利なメカニズムを提供します。引数を指定せずに親ノードで呼び出します。 

myNode.replaceChildren();
要素間でノードを転送する

replaceChildren() を使用すると、冗長なループ コードに頼ることなく、要素間でノードを簡単に転送できます。たとえば、パーティーに必要な食べ物を選択できる簡単なアプリケーションがあるとします。このHTMLは次のようになります： 

<h2>Party food option list</h2>

<main>
  <div>
    <label for="no">No thanks!</label>

    <select id="no" multiple size="10">
      <option>Apples</option>
      <option>Oranges</option>
      <option>Grapes</option>
      <option>Bananas</option>
      <option>Kiwi fruits</option>
      <option>Chocolate cookies</option>
      <option>Peanut cookies</option>
      <option>Chocolate bars</option>
      <option>Ham Sandwiches</option>
      <option>Cheese Sandwiches</option>
      <option>Falafel sandwiches</option>
      <option>Ice cream</option>
      <option>Jelly</option>
      <option>Carrot sticks and hummus</option>
      <option>Margherita pizza</option>
      <option>Pepperoni pizza</option>
      <option>Vegan veggie pizza</option>
    </select>
  </div>

  <div class="buttons">
    <button id="to-yes">Transfer to "Yes" --></button>
    <button id="to-no"><-- Transfer to "No"</button>
  </div>

  <div>
    <label for="yes">Yes please!</label>

    <select id="yes" multiple size="10">

    </select>
  </div>
</main>

いくつかの単純なCSSを使用して、2つの選択リストを並べて配置し、その間にコントロールボタンを配置することは理にかなっています。 

main {
  display: flex;
}

div {
  margin-right: 20px;
}

label, button {
  display: block;
}

.buttons {
  display: flex;
  flex-flow: column;
  justify-content: center;
}

select {
  width: 200px;
}

私たちがやりたいのは、「はい」ボタンが押されたときに「いいえ」リストで選択されたオプションを「はい」リストに転送し、「はい」リストで選択されたオプションを「いいえ」リストに転送することです 「いいえ」ボタンが押されたとき。

これを行うために、各ボタンにクリック イベント ハンドラーを指定します。このハンドラーは、1つの定数に転送する選択されたオプションと、別の定数に転送するリスト内の既存のオプションをまとめます。次に、リストの replaceChildren() を呼び出してオプションを転送し、spread 演算子を使用して、両方の定数に含まれるすべてのオプションを渡します。 

const noSelect = document.getElementById('no');
const yesSelect = document.getElementById('yes');
const noBtn = document.getElementById('to-no');
const yesBtn = document.getElementById('to-yes');

yesBtn.addEventListener('click', () => {
  const selectedTransferOptions = document.querySelectorAll('#no option:checked');
  const existingYesOptions = document.querySelectorAll('#yes option');
  yesSelect.replaceChildren(...selectedTransferOptions, ...existingYesOptions);
});

noBtn.addEventListener('click', () => {
  const selectedTransferOptions = document.querySelectorAll('#yes option:checked');
  const existingNoOptions = document.querySelectorAll('#no option');
  noSelect.replaceChildren(...selectedTransferOptions, ...existingNoOptions);
});
簡単な

HTML： 

<SPAN id=IdTest>[SPAN要素<B>[B要素]</B>]<SPAN>

JavaScript： 

E=document.createElement('EM'); //新しいEM要素を生成。
E.innerText="[EM要素]";         //その要素のテキストを指定。
IdTest.replaceChildren(E, "テキスト<B>[B要素？]</B>±"); //子ノードを置き換える。
D=IdTest.outerHTML; //＝[string]：<span id="IdTest"><em>[EM要素]</em>テキスト&lt;B&gt;[B要素？]&lt;/B&gt;±</span>
テスト