javascript - AppendChild TypeError 即使 Child 是 HTML

Question

我正在使用 Shopify，并尝试按与发布日期不同的日期对博客文章进行排序。 Shopify 社区论坛表示，唯一真正的方法是使用 Liquid 插入信息并通过客户端 Javascript 更改信息。我通过获取 div 和新日期并将其放入数组中的对象中来做到这一点。该对象的结构具有 div 值和日期值，如下所示:

0: 
date: "1563681600" 
div: " <div class="article-image">
          <a href="/blogs/upcoming/dog-days-of-summer">
            <div class="rimage-outer-wrapper" style="max-width: 750px"><div class="rimage-wrapper lazyload--placeholder" style="padding-top:60.0%"><img class="rimage__image lazyload fade-in " data-src="//cdn2.shopify.com/s/files/1/0152/7041/2388/articles/84th_2019-0721_slider_{width}x.jpg?v=1561562008" data-widths="[180, 220, 300, 360, 460, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]" data-aspectratio="1.6666666666666667" data-sizes="auto" alt="DOG DAYS OF SUMMER"><noscript><img src="//cdn2.shopify.com/s/files/1/0152/7041/2388/articles/84th_2019-0721_slider_1024x1024.jpg?v=1561562008" alt="DOG DAYS OF SUMMER" class="rimage__image"></noscript></div></div>

          </a>
        </div>


        <div class="meta">

                  <span class="meta-item date">1563681600</span>
                  <span class="meta-item" id="time">1-3pm</span>
                  <span class="meta-item location">84th Street Location</span>


        </div>

        <h2><a href="/blogs/upcoming/dog-days-of-summer" title="">DOG DAYS OF SUMMER</a></h2>
        <div class="rte article-excerpt"><b>Books of Wonder</b><span>&nbsp;</span><span>is excited to host a picture book event: DOG DAYS OF SUMMER. Please join us on Sunday, July 21st at our 84th Street Store to celebrate four amazing picture books about dogs!</span></div>

        <p class="fullarticle"><a class="cta-link" href="/blogs/upcoming/dog-days-of-summer">Read more</a></p>
      " 

按日期对数组进行排序后，我现在遇到的问题是如何获取所有这些 div 元素并将它们显示在 DOM 中。即使这些 DIVS 是使用innerHTML 捕获的，AppendChild 也会引发错误。这是代码:

function storeid() {
  var divName = document.getElementsByClassName('pullup');
  var className = document.getElementsByClassName('date');
  var classnameCount = className.length;
  var IdStore = new Array();

  for (var j = 0; j < classnameCount; j++) {
    var obj = {};
    var div = divName[j].innerHTML;
    var dateString = className[j].innerText;
    obj["div"] = div;
    obj["date"] = dateString;
    IdStore.push(obj);
  }
  console.log(IdStore);
  IdStore = IdStore.sort(function(a, b) {
    return b.date - a.date
  });

  IdStore.forEach(el => {
    document.body.appendChild(el.div);
  })
}
storeid();

但是，尽管指定它只采用 div 我仍然收到以下错误。 类型错误:无法在“Node”上执行“appendChild”:参数 1 不是“Node”类型

appendChild 不能追加这么多吗？或者有更好的方法来解决这个问题吗？

Answer 1

当你这样做时:

var div = divName[j].innerHTML;

您不再处理节点，它是一个字符串。从该行中删除 .innerHTML 它应该可以工作。