如何解决在包装正文的元素之前附加一个元素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' ) )
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。