title: DOMException: Failed to execute 'insertBefore' on 'Node'-- in Local storage
body: <p>I am trying to put a div with some text in the header area before row Starts...</p>
  
  <p>And creating element and adding textnode and appending code :</p>
  
  <pre><code>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)
  </code></pre>
  
  <p>In HTML it looks Like </p>
  
  <pre><code>  &lt;header id="main-header" class="bg-success text-white p-4 mb-3"&gt;
      &lt;div class="container"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-md-6"&gt;
              &lt;h1 id="header-title"&gt;Item Lister&lt;/h1&gt;
          &lt;/div&gt;
          &lt;div class="col-md-6 align-self-center"&gt;
              &lt;input type="text" class="form-control" id="filter" placeholder="Search Items..."&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/header&gt;
  </code></pre>
  
  <p>But I am getting an error </p>
  
  <blockquote>
    <p>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.</p>
  </blockquote>