How to manipulate HTML within a jQuery variable?

Question

I am trying to manipulate the HTML stored within a jQuery variable. I want to do this manipulation before I write the variable to the document.

So, I have a variable defined as:

var sighting = "<div><span class="feed_name"></span></div>";

And I want to put "hello world" in the span element. This is the part that I can't get to work:

$(sighting).("span.feed_name").html(name);

Then I write the 'sighting' variable to the page:

$(#sightings).append(sighting);

Which puts the HTML in the sighting variable into the <div id="sightings"></div> element on the page.

Any help would be greatly appreciated!

Thanks,

Mark

Answer 1

I prefer this method, you'll have more control over the elements because they remain as objects, and are thus easier to coerce into functions.

sighting = document.createElement('div');

Then you can manipulate as if it was already part of the DOM

$(sighting).addClass("feed_name").html(name);
$(sighting).appendTo("#sighting");

EDIT

Hmm... it seems I misread your question. I would still prefer to make the elements using the createElement() function.

sighting = document.createElement('div');
sighting_contents = document.createElement('span');

$(sighting_contents).addClass("feed_name").html(name);
$(sighting).append(sighting_contents);
$(sighting).appendTo("#sightings");

A little more verbose, but you can string the last three into one long line if you want... I think this is more readable and ultimately gives you more control, because technically you shouldn't be writing a bunch of HTML in your js, you can create the elements and append them, but as far as writing big blocks of markup I think creating the elements as objects like this gives you more flexibility.

You can also attach events to elements added like this in a more simple way:

$(sighting).bind("click", function(event) {
  $(this).fadeOut();
});

Answer 2

Try this:

var sighting = "<div><span class=\"feed_name\"></span></div>",
    $elem = $(sighting).find("span.feed_name").text("hello world").parent();
$("#sightings").append($elem);

The parent call is needed to get back to the outer div.