DOMException: не удалось выполнить «insertBefore» на «Node» - в локальном хранилище

Question

Я пытаюсь поместить div с некоторым текстом в область заголовка перед началом строки ...

И создание элемента и добавление текстового узла и добавление кода:

let newDiv = document.createElement('div');
newDiv.className = 'Hello';
newDiv.id = 'HelloId';
newDiv.setAttribute('title', 'This Is Test');
let chNode = document.createTextNode('Something is Here');
newDiv.appendChild(chNode)
newDiv.style.background = 'red';
newDiv.style.padding = '2%';
let headContainer = document.querySelector('header .container');
let headh1 = document.querySelector('header h1');
headContainer.insertBefore(newDiv, headh1)
console.log(headh1)

В HTMLэто выглядит как

  <header id="main-header" class="bg-success text-white p-4 mb-3">
    <div class="container">
      <div class="row">
        <div class="col-md-6">
            <h1 id="header-title">Item Lister</h1>
        </div>
        <div class="col-md-6 align-self-center">
            <input type="text" class="form-control" id="filter" placeholder="Search Items...">
        </div>
      </div>
    </div>
  </header>

Но я получаю сообщение об ошибке

Uncaught DOMException: Не удалось выполнить «insertBefore» на «Node»: узел, перед которым новый узел долженбыть вставленным не является потомком этого узла.

Answer 1

Вы имеете в виду это? Вставить div перед заголовком?

let newDiv = document.createElement('div');
newDiv.className = 'Hello';
newDiv.id = 'Hello Id';
newDiv.setAttribute('tile', 'This Is Test');
let chNode = document.createTextNode('Something is Here');
newDiv.appendChild(chNode)
newDiv.style.background = 'red';
newDiv.style.padding = '2%';

let container = document.querySelector('header > .container')
let headh1 = container.querySelector('h1');
console.log(headh1)

headh1.closest("div").insertBefore(newDiv, headh1)

<header id="main-header" class="bg-success text-white p-4 mb-3">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <h1 id="header-title">Item Lister</h1>
      </div>
      <div class="col-md-6 align-self-center">
        <input type="text" class="form-control" id="filter" placeholder="Search Items...">
      </div>
    </div>
  </div>
</header>

Или перед строкой?

let newDiv = document.createElement('div');
newDiv.className = 'Hello';
newDiv.id = 'Hello Id';
newDiv.setAttribute('tile', 'This Is Test');
let chNode = document.createTextNode('Something is Here');
newDiv.appendChild(chNode)
newDiv.style.background = 'red';
newDiv.style.padding = '2%';

let container = document.querySelector('header > .container')
let headh1 = container.querySelector('h1');
let row = headh1.closest(".row")
container.insertBefore(newDiv, row)

<header id="main-header" class="bg-success text-white p-4 mb-3">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <h1 id="header-title">Item Lister</h1>
      </div>
      <div class="col-md-6 align-self-center">
        <input type="text" class="form-control" id="filter" placeholder="Search Items...">
      </div>
    </div>
  </div>
</header>