无法在“节点”上执行“ insertBefore” /“ appendChild”：参数1的类型不是“节点”

编程问答 2022-06-09

问题描述

我正在尝试制作一个包含两个单独的轮播的页面。 只要我只有这些旋转木马，一切都会正常。如果我将旋转木马的幻灯片保存在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 (将#修改为@）

appendchildclonenodejavascriptjsonslider