Как можно изменить порядок элементов в блоке?

Question

[OstapO]

Есть такая структура разметки:

<div>
    <input disabled checked class="rating__input rating__input--none" name="quality" value="0" type="radio">
<input name="quality" id="quality1" value="1" type="radio">
<label for="quality1"></label>

<input name="quality" id="quality2" value="2" type="radio">
<label for="quality2"></label>

<input name="quality" id="quality3" value="3" type="radio">
<label for="quality3"></label>

<input name="quality" id="quality4" value="4" type="radio">
<label for="quality4"></label>
 
</div>

А должно быть так:

<div>
    <input disabled checked class="rating__input rating__input--none" name="quality" value="0" type="radio">
    <label for="quality1"></label>
    <input name="quality" id="quality1" value="1" type="radio">

    <label for="quality2"></label>
    <input name="quality" id="quality2" value="2" type="radio">

    <label for="quality3"></label>
    <input name="quality" id="quality3" value="3" type="radio">

    <label for="quality4"></label>
    <input name="quality" id="quality4" value="4" type="radio">
</div>

как скриптом можно изменить порядок размещения input и label ? и возможно ли вообще такое?

Comments

[origami1024]

Можно. Но сначала фидлу в студию

[OstapO]

origami1024, https://jsfiddle.net/bceot47h/3/

[ggbb]

Элементы в DOM перемещаются путём удаления элемента и создания его в том месте, где тебе нужно.

Answer 1

[Stockholm Syndrome]

document.querySelectorAll('div label').forEach((l) => {
  l.parentNode.insertBefore(l, l.previousElementSibling);
});

Comments

[OstapO]

Спасибо!