CODEWITHSUNDEEP
javascript
rex
rex

Reputation: 1025

How to parse [object HTMLDivElement]?

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

Upvotes: 1

Views: 6442

Answers (5)

Varun Chakervarti
Varun Chakervarti

Reputation: 1042

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

Upvotes: 1

epascarello
epascarello

Reputation: 207531

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>

Upvotes: 0

OnlyMAJ
OnlyMAJ

Reputation: 819

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

Upvotes: 0

Nitish Kumar
Nitish Kumar

Reputation: 4870

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

Upvotes: 0

Lajos Arpad
Lajos Arpad

Reputation: 76621

I believe this row is your problem:

toReturn += children[i];

and this should be instead of it:

toReturn += $(children[i]);

Upvotes: 0

Related Questions