Grow your CSS skills. Land your dream job.

jQuery Object to HTML?

  • # September 27, 2012 at 11:11 pm

    Hi everyone,

    I’m finding divs by class name which creates an object. I want the html of that object so I can append it to the body of the page. Can that be done?

    So for example:


    // The html...
    <div class="findme">Hello</div>
    <div class="findme">Hello again</div>

    // The jquery...
    obj = $('body').find('.findme')

    So obj would result in an object. How can I output that object as html?

    # September 27, 2012 at 11:46 pm

    You could just do:

    var obj = $(‘.findme’).html();
    $(document.body).append(obj);

    # September 27, 2012 at 11:47 pm

    You can simply use the append methods jQuery comes with.

    $(‘.findme’).appendTo(‘body’);

    # September 27, 2012 at 11:52 pm

    Might not be explaining myself good.

    After finding all the divs with the class I’m looking for, I end up with those divs wrapped up as an object. So when I try and append to the body all I get is Object Object.

    What I want is all the HTML in that object.

    # September 28, 2012 at 12:12 am

    What I want is all the HTML in that object.

    did you notice `.html()` in TheDoc’s example?

    If you had a collection of more than one jQuery object, you could use `.each()` to apply the method to each of them.

    # September 28, 2012 at 12:21 am

    Will have to try .html() again because I had already tried it but didn’t think it worked as expected.

    # September 28, 2012 at 1:18 am

    I’m really not sure what you’re trying to do, but this should get you closer: http://codepen.io/ggilmore/pen/GkrdE

    # September 28, 2012 at 8:46 am

    If your building the HTML elements with jQuery then you can still use the above code in my previous post but instead pass in the object and jQuery will know what to do with it.

    var myObj = $(‘

    ‘);
    myObj.appendTo(‘body’);

    Ignore the black slash in the code, for some reason its been treated as HTML which means the markdown handler is broken on the forum.

    # September 28, 2012 at 11:00 am

    .html() only seems to work on an element that contains the divs I want to grab. I don’t have a containing element except body and I don’t want to grab ALL of the html in body.

    So I use find to grab all the divs with a class of findme. That results in one object with the divs inside.

    What I’m really looking to do with that is save it to local storage. Then when the page loads again, load what’s in local storage, which needs to be all the html, not an object.

    So my problem is that when I append to the body, the result I’m getting is Object, not the actual html.

    I’m wondering if I have to convert the object to a string?

    # September 28, 2012 at 11:44 am

    I might have to change my approach actually now that I’ve been testing some more. I think I need to have a containing element and it might actually be easier. Thanks for everyone’s help!

    # September 28, 2012 at 2:18 pm

    SO, IIUC, you have something like this:

    Some Content.

    Do you want the HTML contents of the div (i.e., `

    Some Content.

    `, which is what I’ve been understanding you to mean)?

    Or do you want to include the HTML for the div tag itself as well?
    There’s a jQuery plugin that will do that:

    jQuery.fn.outerHTML = function(s) {
    return s
    ? this.before(s).remove()
    : jQuery(“

    “).append(this.eq(0).clone()).html();
    };

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".