質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

7513閲覧

insertBefore で "not a child of this node."になってしまう

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2022/05/24 08:11

ボタンを押したら、テーブルの行を追加するJavascriptを作成しています。下記のような流れになっています。

  1. ボタンをクリック
  2. addButton() を実行
  3. 新要素actionElm、親要素、挿入場所直前の要素を取得
  4. insertBefore の処理
  5. エラー

ボタンをクリックするとエラーが発生します。
test_js.html:73 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.
新しいノードが挿入される前のノードは、このノードの子ではない。

Chromeの検証で追いかけてみると、親要素<table> actionTable、親要素の中に子要素<tr> addButton は確認できるので問題がなさそうに思えます。

エラーが発生するのは何が原因と考えられるでしょうか?
よろしくお願いします。

html

1<table class="table" id="actionTable"> 2 <tr> 3 <th scope="col" style="width:5%">列1</th> 4 <th scope="col" style="width:10%">列2</th> 5 <th scope="col" style="width:60%">列3</th> 6 <th scope="col" style="width:25%">列4</th> 7 </tr> 8 <tr> 9 <td> 10 <div> 11 <input type="checkbox" name="data[2][delete]"> 12 </div> 13 </td> 14 <td> 15 <input type="hidden" name="data[2][id]" value="7"> 16 <input type="text" name="data[2][name]" value="new4"> 17 </td> 18 <td><input type="text" name="data[2][url]" value="https://music.youtube.com"></td> 19 <td><input type="text" name="data[2][memo]" value="memoemoemo"></td> 20 </tr> 21 <tr> 22 <td> 23 <div> 24 <input type="checkbox" name="data[3][delete]"> 25 </div> 26 </td> 27 <td> 28 <input type="hidden" name="data[3][id]" value="8"> 29 <input type="text" name="data[3][name]" value="new3"> 30 </td> 31 <td><input type="text" name="data[3][url]" value="https://youtube.com"></td> 32 <td><input type="text" name="data[3][memo]" value="memoemoemo"></td> 33 </tr> 34 35 <tr id="addButton"> 36 <td colspan="4"> 37 <button type="button" onclick="addAction()">追加</button> 38 </td> 39 </tr> 40</table>

javascript

1<script> 2 function addAction() { 3 let actionElm = document.getElementById('actionTemplate').content.cloneNode(true); 4 let actionTable = document.getElementById('actionTable'); 5 let addButton = document.getElementById('addButton'); 6 actionTable.insertBefore(actionElm, addButton); 7 } 8</script>

html

1<template id="actionTemplate"> 2 <tr> 3 <td> 4 <div class="custom-control custom-checkbox"> 5 <input type="checkbox" name="data[-1][delete]"> 6 </div> 7 </td> 8 <td> 9 <input type="hidden" name="data[-1][id]" value="-1"> 10 <input type="text" name="data[-1][name]" value=""> 11 </td> 12 <td><input type="text" name="data[-1][text]" value=""></td> 13 <td><input type="text" name="data[-1][memo]" value=""></td> 14 </tr> 15</template>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

テーブルの落とし穴ですね

javascript

1actionTable.querySelector('tbody').insertBefore(actionElm, addButton);

とtrはtableの直下にないのです
単純に処理するならこれでよいでしょう

javascript

1addButton.before(actionElm);

投稿2022/05/24 09:39

yambejp

総合スコア114581

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2022/05/24 11:50

なるほどです。コード上は無くても内部的には自動的に生成されているのですね。 tableタグは<tbody>が無くても動作するので省略していました。 教えていただいたコードでうまく動作しました。 ありがとうございます。
guest

0

Google Chrome の DevTools の Elements タブを見るとわかりますが、実は <tr> の親は <table> ではありません。<tbody> が間に存在します。ですので、

js

1addButton.parentNode.insertBefore(actionElm, addButton);

js

1addButton.insertAdjacentElement('beforebegin', actionElm);

などとするとよいでしょう。

投稿2022/05/24 09:10

編集2022/05/24 09:12
int32_t

総合スコア20670

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2022/05/24 11:49

ありがとうございます。 確認しました。本当にコードには書いていないのに<tbody>がありました。 これは気が付きませんでした。 他の方法もご提示いただきありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問