jsでinsertBeforeを使用した要素移動のやり方が分かりません。

Question

いつもお世話になっています。
jsを勉強中ですが、難しくて教えて頂けたらと思います。

勉強のため、特定のクラス要素を別の要素内に移動させる処理を
バニラjsで書きたいと思っています。

jqueryだと以下のようになるのですが、
jsで書くにはどうすればいいのでしょうか？

<div>
    <p class="original-data">移動データ１</p>
    <p>移動しない</p>
    <p class="original-data">移動データ２</p>
    <p>移動しない</p>
    <p>移動しない</p>
    <p class="original-data">移動データ３</p>
    <p class="original-data">移動データ４</p>
    <p class="original-data">移動データ５</p>
</div>

<div>
    <span id="after-moving"></div>
</div>

$(function(){
    $('.original-data').insertBefore('#after-moving');
});

結果です

<div>
    <p>移動しない</p>
    <p>移動しない</p>
    <p>移動しない</p>
</div>

<div>
    <p class="original-data">移動データ１</p>
    <p class="original-data">移動データ２</p>
    <p class="original-data">移動データ３</p>
    <p class="original-data">移動データ４</p>
    <p class="original-data">移動データ５</p>
    <span id="after-moving"></div>
</div>

失敗したコード

コチラはエラーが出てきてしまい処理が完了しませんでした

Uncaught DOMException: Failed to execute 'insertBefore' on 'Node':
The node before which the new node is to be inserted is not a child of this node.

<div>
    <p class="original-data">移動データ１</p>
    <p>移動しない</p>
    <p class="original-data">移動データ２</p>
    <p>移動しない</p>
    <p>移動しない</p>
    <p class="original-data">移動データ３</p>
    <p class="original-data">移動データ４</p>
    <p class="original-data">移動データ５</p>
</div>

<div>
    <span id="after-moving"></div>
</div>

let newNode = document.createElement('span');
let originalData = document.querySelectorAll('.original-data');
let afterMovingData = document.getElementById('after-moving').parentNode;
for (i = 0, len = originalData.length; i < len; i++) {
    afterMovingData.insertBefore(newNode , originalData[i]);
}

Comments

[miyabi_pudding]

なぜバニラに直そうと思ったのでしょう？
勉強のためですか？

[退会済みユーザー]

元のソースがどう動くかも書いてください。
そして、自分ではどう動くと思って、どう失敗したんでしょうか？

[tokotoko2020]

miyabi_takatsuk
はい。勉強の為です。現在、jqueryしか分からないので。。。

[m.ts10806]

今起きてる問題を明記してください。
コードもらってできた！では、分かった気になるだけです。

[miyabi_pudding]

> <span id="after-moving"></div>

閉じタグが、違いますね。
それが原因では？

[hentaiman]

jsの勉強だけが目的なら普通に
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js
の処理を追える範囲で追ってみてなぁなぁで何となく理解を進めてみるのはどうだろうか？
追う過程で色々と目に止まるものもあるはず

Answer 1

要素の操作なら、こっちの方が楽かも。

document.querySelectorAll('.original-data').forEach(
  e => document.getElementById('after-moving').insertAdjacentElement( 'beforebegin', e )
);

参考：
Element.insertAdjacentElement() - Web API | MDN

Comments

[tokotoko2020]

返事が遅くなりすいません。
ありがとうございます。やってみたところ出来ました。
各メソッドについては今後さらに勉強していきたいと思います。

Answer 2

「同じ動作をするコード」なら以下です。
「同じ意味のコード」ではありません。DOM構造上、今回はたまたま結果が同じになります。

document.getElementById('after-moving').parentElement
    .prepend(...document.getElementsByClassName('original-data'));

厳密に同じ意味とするなら少し変わります。

const target = document.getElementById('after-moving');
const parent = target.parentElement;
document.querySelectorAll('.original-data')
    .forEach(el => parent.insertBefore(el, target));

Comments

[tokotoko2020]

返事が遅くなりすいません。
ありがとうございます。
色々なアプローチがあるのですね。
勉強になりました。

Answer 3

const target = document.getElementById('after-moving');
const targetParent = target.parentNode;
const datas = document.querySelectorAll('.original-data');
datas.forEach(elm => {
  targetParent.insertBefore(elm, target);
});

もっと簡略できるかもしれない。

ってわけで行数節約版

const target = document.getElementById('after-moving');
document.querySelectorAll('.original-data').forEach(elm => {
  target.parentNode.insertBefore(elm, target);
});

（いや、もうちと簡略できるかもしれない）

エラーの原因

insertBeforeメソッドの使い方が間違っているからです。
移動したい要素の親.insertBefore(移動したい要素, 前に移動する時のターゲット);
という使い方です。
なので、質問者さんのコードを直すと下記になります。

// 下記定義はいらない
// let newNode = document.createElement('span');
let originalData = document.querySelectorAll('.original-data');
let afterMovingData = document.getElementById('after-moving').parentNode;
for (i = 0, len = originalData.length; i < len; i++) {
  afterMovingData.insertBefore(originalData[i], document.getElementById('after-moving'));
}

Comments

[miyabi_pudding]

こうやって見ると、これだけ行数の節約できるなんて、
やっぱjQueryは偉大な発明だと思います。

[tokotoko2020]

返事が遅くなりすいません。
ありがとうございます。
間違えた箇所も説明していただき大変勉強になりました。

そうですね。jqueryはとても便利だという事が分かりました