Failed to execute ‘insertBefore’ on ‘Node’ The node before which the new node is to be inserted is not a child of this node.の原因・対処方法
JavaScritptのinsertBeforeを使って、要素を移動したい。
Failed to execute ‘insertBefore’ on ‘Node’ The node before which the new node is to be inserted is not a child of this node.
コンソールに上記エラーが出て要素を移動出来ない為、エラーの原因と対処方法を知りたい。
本記事ではこのような悩みを解決します。
insertBeforeの使い方
おさらいとして、insertBeforeはある要素を移動したい場所の要素直前に持ってくる時に使います。
使い方は以下の通りです。
移動先親要素.insertBefore(移動したい要素, 移動先要素);
insertBeforeの使い方について詳しくはこちら
https://kasumiblog.org/javascript-dom-move/
エラーの原因
エラーを直訳すると以下の用になります。
‘Node’ で ‘insertBefore’ を実行できませんでした 新しいノードが挿入される前のノードは、このノードの子ではありません。
つまりinsertBeforeの第二引数に指定した移動先要素と移動先親要素が親子関係に無い事が原因でエラーが出ています。
対処方法
移動先親要素は直上の親要素であるか確認しましょう。
親子関係では無く、親孫関係だとエラーが出てしまいます。
HTMLで自動生成される親要素があるか確認
直上の親要素を指定したがエラーが出てしまう場合、自動で生成される親要素があるかブラウザの検証で確認しましょう。
例としてtable要素はtbodyなどが自動で生成されます。
まとめ
Failed to execute ‘insertBefore’ on ‘Node’ The node before which the new node is to be inserted is not a child of this node.の原因・対処方法について紹介しました。
以上で解説を終わります。