javascript - 如何解析[object HTMLDivElement]？

Question

我在将对象注入(inject)回 DOM 时遇到问题。我必须抓取一个 div 将其放入数组中，然后注入(inject)到 DOM 中。但是当我注入(inject)回 DOM 时，我显示 [object HTMLDivElement] 而不是 div。我缺少什么。代码设置在jsfiddle。 http://jsfiddle.net/rexonms/zdzdnuo7/

提前致谢

HTML

    <!-- Section A -->
    <div id="stories">
        <ul class="slider"></ul>
    </div>

    <!-- Section B -->
    <div id="x">
        <div class="story">A</div>
        <div class="story">B</div>
        <div class="story">C</div>
        <div class="story">D</div>
        <div class="story">E</div>

    </div>

JavaScript

    var items = $('.story');   
    var itemsPerSlide = 2;
    var parent = [];
    var children = [];

    // Divide the items in chunks
    for(var i=0; i<items.length; i++){
        if(i<itemsPerSlide){
            children.push(items[i]);
        }

        else{

            itemsPerSlide = itemsPerSlide + i;

            childrenToParent(children, parent);
            children = [];
            children.push(items[i]);
        }
    }

    childrenToParent(children, parent);
    $('.slider').append(parent);



    function childrenToParent(children, parent){
        parent.push("<li>" + extractEls(children) + "</li>");
    }


    function extractEls(children){
        var toReturn = '';
        for(var i = 0; i<children.length; i++){
            toReturn += children[i];
        }
        return toReturn;
    }

Answer 1

如果你想让原始容器完好无损，只需克隆你想要复制其节点的容器，并从复制的容器中获取节点即可。

您将它们放入数组中，然后多次运行循环，而不是您可以运行一次循环并同时将它们放入您的.slider 类。

工作/更新: JS Fiddle Link

JS 部分:

var storyCopy = $("#x").clone();
var items = storyCopy.find(".story"); 
var itemsPerSlide = 2;
var counter = 0;
var LIElement = document.createElement("li");

for(var i=0; i<items.length; i++) {
    LIElement.appendChild(items[i]);
    counter++;
    if(counter >= itemsPerSlide) {
        $('.slider').append(LIElement);
        LIElement = document.createElement("li");
        counter = 0;
    }
}
$('.slider').append(LIElement);