如何解决无法在“节点”上执行“ insertBefore” /“ appendChild”:参数1的类型不是“节点”
我正在尝试制作一个包含两个单独的轮播的页面。 只要我只有这些旋转木马,一切都会正常。如果我将旋转木马的幻灯片保存在HTML文件中,也可以正常工作。
问题是当我将幻灯片放到JSON文件夹中时发生的(只要我只有转盘就可以正常工作),并向页面添加更多内容。旋转木马不会完全破裂,有时会工作,有时会破裂。在我看来,这是非常随机的。发生的结果是下一个和上一个按钮停止运行,并且出现错误消息。有时是一两个按钮不起作用,有时是全部。
错误消息是:
未捕获的TypeError:无法在“ Node”上执行“ insertBefore” /“ appendChild”:参数1的类型不是“ Node”。
在HTMLElement。
我已经阅读了文档,例如这里https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild#Returns,这里https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore和这里https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode,还有其他地方。我还在Stackoverflow上阅读了有关该主题的信息。
我相信我得到了应该应该如何工作的理论依据,但我似乎还是无法正确地做到这一点,因此,不胜感激。
以下是其中一个轮播的js-和JSON文件。两个旋转木马看起来都一样。如果需要更多代码,请告诉我。
谢谢您的时间。
JS
/** INSPIRATION CONTROLLERS **/
document.addEventListener("DOMContentLoaded",() => {
let stream = document.querySelector(".inspiration__stream");
let items = document.querySelectorAll(".inspiration__item");
let prevBtn = document.querySelector(".inspiration-prev-chev");
prevBtn.addEventListener("click",() => {
stream.insertBefore(items[items.length - 1],items[0]);
items = document.querySelectorAll(".inspiration__item");
});
let nextBtn = document.querySelector(".inspiration-next-chev");
nextBtn.addEventListener("click",() => {
stream.appendChild(items[0]);
items = document.querySelectorAll(".inspiration__item");
});
});
/** GET INSPIRATION ITEMS **/
const showInspiration = document.querySelector('.inspiration__stream');
const getInspirationProducts = async () => {
try {
let res = await fetch("carousel.json");
let data = await res.json();
let products = data.items;
displayInspirationProducts(products);
} catch (error) {
console.log(error);
}
};
/** DISPLAY INSPIRATION ITEMS **/
const displayInspirationProducts = (products) => {
const htmlString = products.map((item)=> {
return `
<div class="inspiration__item">
<div class="the-background">
<img src="${item.image.url}"alt="" class="inspiration-img">
<div class="subtitles">
<p class="title">${item.title}</p>
<p class="description">Lorem ipsum dolor sit amet consectetur.</p>
</div>
</div>
</div>
`
})
.join("");
showInspiration.innerHTML = htmlString;
};
getInspirationProducts();
JSON
{
"items":[
{
"title":"one","caption":"captain-1","image":{
"url":"/img/i-1.png"
}
},{
"title":"two","caption":"captain-2","image":{
"url":"/img/i-2.png"
}
},{
"title":"three","caption":"captain-3","image":{
"url":"/img/i-3.png"
}
},{
"title":"four","caption":"captain-4","image":{
"url":"/img/i-4.png"
}
},{
"title":"five","caption":"captain-5","image":{
"url":"/img/i-5.png"
}
},{
"title":"six","caption":"captain-6","image":{
"url":"/img/i-6.png"
}
},{
"title":"seven","caption":"captain-7","image":{
"url":"/img/i-7.png"
}
}
]
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。