CODEWITHSUNDEEP
javascriptjqueryhtml
Red
Red

Reputation: 6378

get the HTML content of clicked element jQuery

I have the following HTML 

<label class="editable" id="user_info_username">Hai world...</label>

now on click function i need the content of the clicked element .

i tried 

$(".editable").live("click",function(){
alert($(this).html())  //returns Hai world...
});

But i need the HTML content

so <label class="editable" id="user_info_username">Hai world...</label>

Upvotes: 5

Views: 6899

Answers (5)

totallyNotLizards
totallyNotLizards

Reputation: 8569

The answer using jQuery.clone() is best IMO, but I'm adding this here as it's another way and might be helpful to others.

You could get the html of whatever the parent div is - this is an issue because there might be siblings which would also be returned.

like so:

alert($(this).parent().html()); //will return siblings too

http://jsfiddle.net/Qg9AL/

Upvotes: 1

Alnitak
Alnitak

Reputation: 339816

Clone the clicked element, wrap it in a <div>, and then ask for the HTML of that - something like:

var html = $('<div/>').append($(this).clone()).html();

Working demo at http://jsfiddle.net/f88kj/

I also previously wrote a plugin that does this at https://stackoverflow.com/a/6509421/6782

(function($) {
    $.fn.outerhtml = function() {
        return $('<div/>').append(this.clone()).html();
    };
})(jQuery);

Upvotes: 6

Nick N.
Nick N.

Reputation: 13559

Maybe you could use a wrapper, like described below:

html:

<div class="YourHtmlContent">
<label class="editable" id="user_info_username">Hai world...</label>
</div>

and js:

$(".editable").live("click",function(){
alert($('.YourHtmlContent').html())
});

Upvotes: 1

Tikhon Jelvis
Tikhon Jelvis

Reputation: 68152

What you're looking for is something like outerHTML. Unfortunately, Firefox does not currently support it, so look for a work-around here: How do I do OuterHTML in firefox?.

Upvotes: 1

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123387

if I well understood you need something like .outerHTML property for jQuery

http://forum.jquery.com/topic/jquery-outerhtml-for-jquery

Upvotes: 3

Related Questions