即使Child是HTML,AppendChild TypeError

时间:2019-07-12 21:17:21

标签: javascript arrays object appendchild

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

df.boxplot(column='Age', by='Embarked', grid=False)

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

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,但仍然出现以下错误。 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();

appendChild是否无法添加这么多?还是有解决这个问题的更好方法?

1 个答案:

答案 0 :(得分:1)

执行此操作时:

var div = divName[j].innerHTML;

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