JavaScript：insertBefore 触发器“NotFoundError：找不到节点”答案

【问题标题】：JavaScript : insertBefore trigger "NotFoundError: Node was not found"JavaScript：insertBefore 触发器“NotFoundError：找不到节点”
【发布时间】：2018-12-29 02:38:05
【问题描述】：

我正在尝试使用insertBefore 方法在我的页面中插入一个新元素，但触发了以下错误：“NotFoundError: Node was not found”。

我不明白为什么它不起作用。

这是我的代码：

let parent = document.getElementById('parent-id')

let title = notification.getElementsByTagName('h3')[1]
let subtitle = createNodeBefore(parent, title, 'h4', 'Subtitle text')

这是我的createNodeBefore() 函数：

let createNodeBefore = (parent, node, type, text, id = false, className = false, style = false) => {

    let textNode = document.createTextNode(text)
    let element = document.createElement(type)

    element.className = className ? className : ""
    element.id = id ? id : ""
    element.style = style ? style : ""
    element.appendChild(textNode)

    parent.insertBefore(element, node)

    return element
}

当我在parent.insertBefore(element, node) 行之前执行控制台日志时，我可以看到parent、element 和node。

编辑：添加html

html 看起来像这样：

<article id="parent-id">
    <div>
       <h3>Some text</h3>
       <i>5th December 2018</i>
       <h3>My title</h3>
       <p>Content ...p>
        ...
    </div>
</article>

【问题讨论】：

能否提供您的 HTML
您确定您的 HTML 中至少有 2 个 h3 标签吗？如果您只有一个 h3 标签，请将代码更改为 let title = notification.getElementsByTagName('h3')[0]
我只是添加了html。有 2 个 h3 元素，我在执行 console.log() 时看到我的元素没有问题
什么是通知？

标签： javascript dom

【解决方案1】：

您的代码期望 article 元素是 h3 元素的父节点，但它不是 - div 元素是它的父节点。此更改应该可以解决问题：

let parent = document.getElementById('parent-id').getElementsByTagName('div')[0]

【讨论】：