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
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>||Working with elements||</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class = "container">
<div class="card" style="width: 12rem;">
 <div class="card-body">
		  <h6 class="card-title">累積ポイント</h6>
		  <div class = "card-text form-floating">
	<div id="div1">The text above has been created dynamically.</div>
 </div>
<div/>
 <script src="https://unpkg.com/stein-js-client"></script>
 <script>
document.body.onload = addElement;

function addElement () {
  const newDiv = document.createElement("div");
  const newContent = document.createTextNode("Hi there and greetings!");
  newDiv.appendChild(newContent);
  const currentDiv = document.getElementById("div1");
  document.body.insertBefore(newDiv, currentDiv);
}
 </script>
 <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>
</body>
</html>