Элемент: метод replaceChildren()

Базовая Широко поддерживается

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2015 года.

Метод Element.replaceChildren() заменяет существующих потомков Node на указанный новый набор потомков. Они могут быть строками или объектами Node.

Синтаксис

replaceChildren(param1)
replaceChildren(param1, param2)
replaceChildren(param1, param2, /* …, */ paramN)

Параметры

param1, …, paramN: Набор объектов Node или строк, которыми нужно заменить существующих потомков Element. Если объекты для замены не указаны, то Element очищается от всех дочерних узлов.

Возвращаемое значение

None (undefined).

Исключения

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" --&gt;</button>
    <button id="to-no">&lt;-- Transfer to "No"</button>
  </div>

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

    <select id="yes" multiple size="10"></select>
  </div>
</main>

Было бы логично использовать немного CSS, чтобы расположить два списка выбора рядом друг с другом, а между ними разместить управляющие кнопки:

main {
  display: flex;
}

div {
  margin-right: 20px;
}

label,
button {
  display: block;
}

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

select {
  width: 200px;
}

Что мы хотим сделать, это перенести все выбранные опции из списка «нет» в список «да», когда нажимается кнопка «да», и перенести все выбранные опции из списка «да» в список «нет», когда нажимается кнопка «нет».

Для этого мы добавляем обработчики событий клика к каждой кнопке, которые собирают вместе выбранные опции, которые нужно перенести, в одну переменную, и существующие опции в списке, в который они переносятся, в другую. Затем он вызывает replaceChildren() для списка, в который нужно перенести опции, используя оператор расширения для передачи всех опций, содержащихся в обеих переменных.

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);
});

Конечный результат выглядит так:

Спецификации

Спецификация
DOM # ref-for-dom-parentnode-replacechildren①

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`replaceChildren`	86	86	78	72	14	86	79	61	14	14.0	86

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Element/replaceChildren