How to parse [object HTMLDivElement]?

Question

I am having issues injecting object back to DOM. I have to grab a div put it in an array and then inject to DOM. But when I inject back to DOM, I shows [object HTMLDivElement] instead of the div. What am I missing. The code is set up at jsfiddle. http://jsfiddle.net/rexonms/zdzdnuo7/

Thanks in advance

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

Just clone the container whose nodes you want to copy and get the nodes from the copied one, if you want to make the original container intact.

And you are putting them into the array and then running a loop multiple times instead you can run a loop once and simultaneously put them in your .slider class.

Working/Updated: JS Fiddle Link

JS Part:

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);

Answer 2

I believe this row is your problem:

toReturn += children[i];

and this should be instead of it:

toReturn += $(children[i]);

Answer 3

add outerHTML to children

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

DEMO

Answer 4

You need to add .html() in your final code . i have updated your coded with this link

Answer 5

The problem you have is you are treating DOM nodes as strings. Adding an element to a string results in .toString() being called and you get the output you see.

If you are just trying to group them and put them in lis, you can do it rather easy with slice and wrapAll.

 var storyHolder = $("#x").clone(); var stories = storyHolder.find(".story"); var itemsPerSlide = 2; for (var i = 0; i < stories.length; i += itemsPerSlide ) { var li = $("<li/>"); stories.slice(i, i + itemsPerSlide ).wrapAll(li); } $(".slider").append(storyHolder.children()); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- 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>