Forums

jacorre

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?

TheDoc

You could just do:

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

SgtLegend

You can simply use the append methods jQuery comes with.

$('.findme').appendTo('body');

jacorre

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.

traq

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.

jacorre

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

TheDoc

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

SgtLegend

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 = $('<\div class="findme" />');
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.

jacorre

.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?

jacorre

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!

traq

SO, IIUC, you have something like this:

  <div>
      <p>Some Content.</p>
  </div>

Do you want the HTML contents of the div (i.e., <p>Some Content.</p>, 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("<p>").append(this.eq(0).clone()).html();
  };

treehouse : what would you like to learn today?

Forums

[Solved] jQuery Object to HTML?