在包装正文的元素之前附加一个元素innerHTML，vanilla Js

问题描述

我试图在包裹身体的元素之前插入一个元素，但得到以下内容

未捕获的类型错误：无法读取 null 的属性“insertBefore”

disown -h

关于如何实现以下结构的任何想法？

document.querySelector( 'body' ).innerHTML = '<div id="boat">' + document.querySelector( 'body' ).innerHTML  + '</div>';

var sailor = document.createElement( 'aside' );
sailor.setAttribute( 'id','sailor' );
sailor.parentNode.insertBefore( document.getElementById( 'boat' ),sailor );

解决方法

sailor 节点没有父节点，它是 boat 元素您必须为其父节点。此外，您插入的节点是第一个参数。

var sailor = document.createElement( 'aside' );
sailor.setAttribute( 'id','sailor' );
var boat = document.getElementById( 'boat' );
boat.parentNode.insertBefore( sailor,boat );

,

sailor 没有添加到 DOM 中，所以它没有父元素.. 你需要先将它添加到 DOM 中，然后才能访问它的父元素

,

sailor.parentNode.insertBefore( document.getElementById( 'boat' ),sailor );

在这里，您试图获取 DOM 上不存在的元素的父节点，因此没有父节点，因此为 null。

这也不是使用 insertBefore 方法的正确方法。从我看到的 MDN 网络文档

let insertedNode = parentNode.insertBefore(newNode,referenceNode)

id 为boat 的div 是引用节点，sailor 元素是新节点，body 是父节点。这样我们就可以将代码重写为

document.querySelector( 'body' ).innerHTML = '<div id="boat">' + document.querySelector( 'body' ).innerHTML  + 'test </div>';

var sailor = document.createElement( 'aside' );
console.log(sailor);
sailor.setAttribute( 'id','sailor' );
document.body.insertBefore( sailor,document.getElementById( 'boat' ) )