DOMException：无法在“节点”上执行“insertBefore”--在本地存储中答案

【问题标题】：DOMException: Failed to execute 'insertBefore' on 'Node'-- in Local storageDOMException：无法在“节点”上执行“insertBefore”--在本地存储中
【发布时间】：2020-02-07 23:31:37
【问题描述】：

我正在尝试在行开始之前在标题区域中放置一个带有一些文本的 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: Failed to execute 'insertBefore' on 'Node': 要插入新节点的节点不是该节点的子节点。

【问题讨论】：

你在使用 Bootstrap 吗？如果是这样，你不能使用 jQuery 吗？
是的，我正在使用 Jquery 和 Bootstrap JS 另外：
$('header').append('whatever') 呢？
您选择的 h1 标头是 <div class="col-md-6"> 的（直接）子节点，而不是 <header id="main-header" class="bg-success text-white p-4 mb-3"> 的（直接）子节点，因此您使用错误的父节点来使用 insertBefore () on，因此出现错误。
@Shilly Dude 谢谢你成功了不是那个家长，我明白了谢谢

标签： javascript dom

【解决方案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>

【讨论】：