Как перенести элемент из одного места в другое?

Question

[nitashy]

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

Есть следующий следующая разметка

<div class="container">
  <div class="wrapper">
    <div class="wrapper-item">
      <h3>заголовок 1</h3>
      текст 1
    </div>
  </div>
 </div>
<div class="container">
  <div class="wrapper">
    <div class="wrapper-item">
      <h3>заголовок 2</h3>
      текст 2
    </div>
  </div>
</div>
<div class="container">
  <div class="wrapper">
    <div class="wrapper-item">
      <h3>заголовок 3</h3>
      текст 3
    </div>
  </div>
</div>

Не обходимо h3 перетащить перед .wrapper.

То бишь, привести всё вот к такому виду.

<div class="container">
  <h3>заголовок 1</h3>
  <div class="wrapper">
    <div class="wrapper-item">
      текст 1
    </div>
  </div>
 </div>
<div class="container">
  <h3>заголовок 2</h3>
  <div class="wrapper">
    <div class="wrapper-item">
      текст 2
    </div>
  </div>
</div>
<div class="container">
  <h3>заголовок 3</h3>
  <div class="wrapper">
    <div class="wrapper-item">
      текст 3
    </div>
  </div>
</div>

Сделать я это пытаюсь следующим скриптом.

$(".container").each(function(){
$(".wrapper h3").insertBefore('.wrapper');
});

Как можно понять, у меня не выходит - заголовки дублируются в каждый блок. Помогите, пожалуйста, исправить, моих скудных познаний недостаточно(

Answer 1

[0xD34F]

Куда и что надо перенести:

const where = '.container';
const what = '.wrapper-item h3';

Конечно, можете и дальше использовать jquery:

$(where).prepend(function() {
  return $(what, this);
});

Но это совсем не обязательно:

document.querySelectorAll(where).forEach(n => {
  const el = n.querySelector(what);

  n.prepend(el);
  // или
  n.insertBefore(el, n.firstChild);
  // или
  n.insertAdjacentElement('afterbegin', el);
  // или
  n.firstChild.replaceWith(el, n.firstChild);
  // или
  n.replaceChildren(el, ...n.childNodes);
});

Comments

[nitashy]

Вы спасли мою жалкую душонку от мучительных страданий, спасибо!