get the HTML for the selected including the selected

Question

Possible Duplicate:
Get selected element’s outer HTML

In jQuery I'm currently using this to get some HTML:

var content = $("tr#add-ingredients-over-here").html();

But, I actually need to include that tr in the selected HTML. I can't figure out how to do this. I also need to replace that with some other HTML after.

Any suggestions on how to do this?

score 2 · Answer 1 · edited May 23 '17 at 12:27

2

What you are looking for is the outerHTML of the element. You can try this:

var content = $("#add-ingredients-over-here")[0].outerHTML;

This is supported by all current browsers. Firefox was the last to add support for this in Firefox 11 (March 2012); all other browsers already support this for at least 4 years now. If you must support older browsers than this stackoverflow thread has a jQuery-based implementation that works everywhere:

jQuery.fn.outerHTML = function() {
    return $(this).length > 0 ? $(this).clone().wrap('<div />').parent().html() : '';
};

edited May 23 '17 at 12:27

Community

1
1

answered Jan 13 '13 at 22:57

Wichert Akkerman

4,918
2
23
30

1

Is it supported in all browsers now? – Felix Kling Jan 13 '13 at 22:59
Yes, for a few years now. See the bottom of https://developer.mozilla.org/en-US/docs/DOM/element.outerHTML for a list of browser versions which support outerHTML. – Wichert Akkerman Jan 13 '13 at 23:01
This question can help for support: http://stackoverflow.com/questions/1700870/how-do-i-do-outerhtml-in-firefox – Christopher Chiche Jan 13 '13 at 23:03
Well, Firefox 11 was released some time in the first or second quarter of last year... I would not call that years ;) But good to know. I'm positively surprised about IE (but I guess they started it... some good things do come from IE). – Felix Kling Jan 13 '13 at 23:03
wrap a `TR` in a `DIV`? IE likely to have a fit – charlietfl Jan 13 '13 at 23:09
@charlietfl: *justifiably!* That'd be invalid, and horrible, HTML anyway... – David Thomas Jan 13 '13 at 23:14
It's not inserted into the document - only created temporarily as a placeholder you can use innterHTML on, so not really that bad. – Wichert Akkerman Jan 14 '13 at 12:28

charlietfl · Answer 2 · 2013-01-13T23:12:35.730

Another fully cross browser approach. Makes a clone of tbody, removes all but the row wanted and retrieves the html from it

var content = $("#add-ingredients-over-here")
                   .parent().clone().find('tr:not(#add-ingredients-over-here)').remove()
                    .end().html()

EDIT: WHy can't you just use clone() if you need the whole TR? A clone can be inserted in another table as a jQuery object

/*copy whole row to another table*/
$('#otherTable').append( $("#add-ingredients-over-here").clone() );

score -1 · Answer 3 · answered Jan 13 '13 at 22:58

-1

Try

$("tr#add-ingredients-over-here").parent().html();

It will retrieve the parent first, and then return its HTML content

answered Jan 13 '13 at 22:58

MatRt

3,494
1
19
14

1

It will also retrieve all other elements of the parent. In this case probably ALL table rows – cowls Jan 13 '13 at 22:58
I did not understand you would like only your TR. In this case, you can create a temporary div, insert a clone of your TR inside and then call the html method. The code is: $('
').append($('#tr#add-ingredients-over-here').clone()).html();
– MatRt Jan 13 '13 at 23:14

get the HTML for the selected including the selected

3 Answers3