Aug17

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("<p>").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.

By caphun · in JavaScript · Tagged , , , , · Comments (16)

16 Comments

  1. Paul Bakaus at
    August 21, 2008, 2:28 am

    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 :)

  2. caphun at
    August 21, 2008, 5:25 am

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

  3. Tonci at
    September 25, 2008, 4:42 am

    What's wring with good old DOM manipulation?

    jQuery.fn.outerHTML = function() {

    return $(this)[0].outerHTML;

    };

  4. caphun at
    September 25, 2008, 7:21 am

    Answer: incompatible across browsers.

  5. Kevin Pirkl at
    February 24, 2009, 11:58 am

    Thanks for this great code…

  6. Parag Lohiya at
    October 14, 2009, 10:13 am

    Thanks for the help this is very useful.

  7. Drew at
    October 20, 2009, 12:39 pm

    The clone function might come in handy as an alternative

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

  8. caphun at
    October 22, 2009, 7:48 am

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

  9. Lepe at
    November 16, 2009, 7:49 pm

    I like your implementation. Nice Job.

  10. Dee at
    November 17, 2010, 8:46 pm

    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/

  11. Sten Hougaard at
    March 9, 2011, 3:06 pm

    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

  12. Danny at
    April 19, 2011, 4:11 am

    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 &lt; and &lg;? Doesn't that cause problems?

  13. Pingback: Get selected element’s outer HTML - Programmers Goodies

  14. Pingback: Extract script tags from a HTML string | Easy jQuery | Free Popular Tips Tricks Plugins API Javascript and Themes

  15. Pingback: How to select html content including the selector element [closed] | Easy jQuery | Free Popular Tips Tricks Plugins API Javascript and Themes

  16. Pingback: Get selected element's outer HTML | Easy jQuery | Free Popular Tips Tricks Plugins API Javascript and Themes