jQuery: outerHTML

The outerHTML property (IE only) could sometimes be very handy, especially if you’re trying to replace an element entirely. Brandon Aaron has very kindly given us a outerHTML plugin that does half the job as it doesn’t support replacements. The following code snippet fills in the blanks:

jQuery.fn.outerHTML = function(s) {
return (s)
? this.before(s).remove()
: jQuery("&lt;p&gt;").append(this.eq(0).clone()).html();
}

To get the outerHTML value of an element do this…

$('#myTag').outerHTML();

To replace #myTag entirely do this…

$('#myTag').outerHTML("<p>My brand new #myTag.</p>");

Hope this helps someone

Update: There’s now a demo page.

http://paulbakaus.com Paul Bakaus

Hey Ca Phun!

Just wanted to let you know I found another implementation of outerHTML some days ago, while working with the SVG suff, and it also defines the setter, seems pretty robust (I used it).

Look here: http://webfx.eae.net/dhtml/ieemu/htmlmodel.html

Cheers
caphun

Thanks Paul. Definitely interesting to see how others are implementing this. Being able to do this.outerHTML = value is certainly much more elegant
Tonci

What's wring with good old DOM manipulation?

jQuery.fn.outerHTML = function() {

return $(this)[0].outerHTML;

};
caphun

Answer: incompatible across browsers.
Kevin Pirkl

Thanks for this great code…
Parag Lohiya

Thanks for the help this is very useful.
http://twitter.com/drewlesueur Drew

The clone function might come in handy as an alternative

http://docs.jquery.com/Manipulation/clone
caphun

@drew: I think the replaceWith is a closer alternative:

http://docs.jquery.com/Manipulation/replaceWith

As I remember that wasn't around when I made this post.
http://www.alepe.com Lepe

I like your implementation. Nice Job.
http://darlesson.com/jquery/outerhtml/ Dee

Just to add to the list, another jQuery outerHTML method that allows you to get or replace the element inheriting the replacing content to the chaining. A good option to replaceWith() method as well.

http://darlesson.com/jquery/outerhtml/
http://www.netsi.dk/wordpress Sten Hougaard

Hi,

Just want to give you credit for this simple but very handy piece of code Thank you for sharing! I myself is working on something which will be a very nice feature for people in the jQuery world – watch my blog

/Sten
Danny

Maybe this wasn't possible when you originally wrote this, or maybe it's slower, but here's what I do:

jQuery.fn.outerHTML = function(s) {

return (s) ? jq(this).replaceWith(s) : jq(this).clone().wrap('').parent().html();

}

Seems much easier to read to me. Also, why do you use < and &lg;? Doesn't that cause problems?
Pingback: Get selected element’s outer HTML - Programmers Goodies
Pingback: Extract script tags from a HTML string | Easy jQuery | Free Popular Tips Tricks Plugins API Javascript and Themes
Pingback: How to select html content including the selector element [closed] | Easy jQuery | Free Popular Tips Tricks Plugins API Javascript and Themes
Pingback: Get selected element's outer HTML | Easy jQuery | Free Popular Tips Tricks Plugins API Javascript and Themes

Yelotofu

"In building standards compliant sites we are creating a better Web for the future."

jQuery: outerHTML