Document.createElement()を用いて生成した文字にbootstrapを反映したい

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
Document.createElement()を用いて生成した文字にbootstrapを反映したいと考えています。
div1をcontainer内に書くとエラーメッセージが出て表示されません。
Document.createElement()を用いて生成した文字をcontainer内であつかって配置を変えたいです。

発生している問題・エラーメッセージ

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.
    at addElement (http://127.0.0.1:5500/index.html:23:17)

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7    <title>||Working with elements||</title>
8    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
9</head>
10<body>
11<div class = "container">
12<div class="card" style="width: 12rem;">
13 <div class="card-body">
14		  <h6 class="card-title">累積ポイント</h6>
15		  <div class = "card-text form-floating">
16	<div id="div1">The text above has been created dynamically.</div>
17 </div>
18<div/>
19 <script src="https://unpkg.com/stein-js-client"></script>
20 <script>
21document.body.onload = addElement;
22
23function addElement () {
24  const newDiv = document.createElement("div");
25  const newContent = document.createTextNode("Hi there and greetings!");
26  newDiv.appendChild(newContent);
27  const currentDiv = document.getElementById("div1");
28  document.body.insertBefore(newDiv, currentDiv);
29}
30 </script>
31 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
32</body>
33</html>

試したこと

<div class = "container"></div>でdiv1を囲まなければ表示されますが、container内で表示位置を変えたりしたいと考えています。宜しくお願いいたします。

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

回答1件

ベストアンサー

js
1  document.body.insertBefore(newDiv, currentDiv);

document.body と currentDiv が親子になってないといけませんが、そうではないですよね。

js
1  currentDiv.parentNode.insertBefore(newDiv, currentDiv);

で動くと思います。

投稿2022/01/27 15:10

int32_t

総合スコア20884

NaokiUchid

2022/01/27 22:39

できました！ MDN Web Docsからコピペで構文を持ってきてたんですが、それぞれの意味を理解できてませんでした。ご回答をありがとうございます！！

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.48%

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

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

質問する

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

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