insertBeforeが反映されません。

プログラミング初心者です。
insertBeforeを使って、h3「IDコメント　状態」の下にフォームに入力した文字をリスト形式に設置したいのですが、うまくいきません。
以下のエラーが出ます。

message: "h3 is not defined"
stack: "ReferenceError: h3 is not defined

h3が定義されていないというのは、
h3はhtmlではなく、script上(js上)にないといけないという意味なのでしょうか？

InsertBeforeを

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>ToDoリスト</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<h1>ToDoリスト</h1>
  <label><input type="radio" name="phone">すべて</label>
  <label><input type="radio" name="phone" >作業中</label>
  <label><input type="radio" name="phone">完了中</label>
  <h3>IDコメント　状態</h3>
  <h2>新規タスクの追加</h2>

  <p>
      <input type="text" id="id_text" value=""> 
      <button id="btn" type="btn"> 追加</button>
  </p>
 

  <script>
    const btn = document.getElementById('btn');
    btn.addEventListener('click', () => { 
      const text = document.getElementById('id_text').value;

    document.body.insertBefore(text, h3);
    });

  </script>

</body>
</html>

h3を定義したところ、以下のエラーが出ました。
TypeError: Failed to execute 'insertBefore' on 'Node': parameter 1 is not of type 'Node'.

「textの部分はNodeじゃないとダメ」という意味だと思うのですが、どう言い換えればいいのかが分かりません。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>ToDoリスト</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<h1>ToDoリスト</h1>
  <label><input type="radio" name="phone">すべて</label>
  <label><input type="radio" name="phone" >作業中</label>
  <label><input type="radio" name="phone">完了中</label>
  <h3 id="id_h3">IDコメント　状態</h3>
  <h2>新規タスクの追加</h2>

  <p>
      <input type="text" id="id_text" value=""> 
      <button id="btn" type="btn"> 追加</button>
  </p>
 

  <script>
    const btn = document.getElementById('btn');
    btn.addEventListener('click', () => { 
      const text = document.getElementById('id_text').value;
      const h3 = document.getElementById('id_h3');

      
    document.body.insertBefore(text, h3);
    });

  </script>

</body>
</html>

行動規範の内容に同意します

回答2件

エラーの内容どおりですが、h3なんて変数を用意していないからです。

投稿2019/11/27 15:18

kei344

総合スコア69400

asako1010

2019/11/27 15:23

kei344さん、いつもホントにありがとうございます。 javaScriptではconst で定義していないと使えないのですね！修正します。

kei344

2019/11/27 15:26

> const で定義変数であればvarでもletでもオブジェクトのプロパティでもなんでもかまいませんが、HTML上の要素を取得する必要があります。

asako1010

2019/11/27 17:26

オブジェクトのプロパティならなんでもいいんですね！ありがとうございます。

kei344

2019/11/27 17:33

> オブジェクトのプロパティならなんでもいい最初に「変数であれば」って言っています。【Node.insertBefore - Web API | MDN】 https://developer.mozilla.org/ja/docs/Web/API/Node/insertBefore 書き換えられた質問文についての問題も、エラー文に書かれている通りです。テキストではなくテキストノードにする必要がありますが、insertAdjacentHTMLとかinsertAdjacentTextを使うほうが簡単だと思います。【element.insertAdjacentHTML - Web API | MDN】 https://developer.mozilla.org/ja/docs/Web/API/Element/insertAdjacentHTML 【Element.insertAdjacentText() - Web API | MDN】 https://developer.mozilla.org/ja/docs/Web/API/Element/insertAdjacentText

行動規範の内容に同意します

ベストアンサー

h3を定義したところ、以下のエラーが出ました。

TypeError: Failed to execute 'insertBefore' on 'Node': parameter 1 is not of type 'Node'.

insertBeforeはノードでの挿入なのでテキストは挿入できません
こうしてください

javascript
1    document.body.insertBefore(document.createTextNode(text), h3);

投稿2019/11/28 01:23

yambejp

総合スコア114773

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

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

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

insertBeforeが反映されません。

関連した質問