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 我仍然收到以下错误。 TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'

难道appendChild不能追加这么多吗？或者有更好的解决方法吗？

Answer 1

当你这样做时：

var div = divName[j].innerHTML;

您处理的不再是 Node，而是 string。从行中删除 .innerHTML，它应该可以工作。

AppendChild TypeError 即使 Child 是 HTML

AppendChild TypeError even though Child is HTML

javascript

arrays

object

appendchild