Home/ Questions/Q 6173749
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T23:37:46+00:00

I’m trying to get a consistent, cross browser outerHtml for a jQuery element, particularly

  • 0

I’m trying to get a consistent, cross browser outerHtml for a jQuery element, particularly $("html").outerHtml(). For example if the page source is this:

<html><script src="blah.js"></script><div class="foo"   id='bar'></p></div></html>

I want to be able to use $("html").outerHtml(); to get the HTML string including the element itself, which would be:

<html><script src="blah.js"></script><div class="foo" id="bar"><p></p></div></html>

I’ve been using Brandon Aaron’s outerHtml plugin which looks something like this:

return $('<div>').append($("html").first().clone()).html();

However this seems to actually try to reload any externally referenced files in the document (scripts, stylesheets), which seems pretty excessive just to get the HTML source of a wrapper element. Can Javascript even put an HTML element inside a DIV element?

Locally, I get this error. Something to do with AJAX rules?

XMLHttpRequest cannot load file:///C:/demo.js?_=1311466511031. Origin null is not allowed by Access-Control-Allow-Origin.

Is there a better way to get outerHtml? I’d really like to avoid any network calls when doing this.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Wrote my own solution, which simply renders the wrapping element:

    (function($){
  $.fn.outerHtml = function() {
    if (this.length == 0) return false;
    var elem = this[0], name = elem.tagName.toLowerCase();
    if (elem.outerHTML) return elem.outerHTML;
    var attrs = $.map(elem.attributes, function(i) { return i.name+'="'+i.value+'"'; }); 
    return "<"+name+(attrs.length > 0 ? " "+attrs.join(" ") : "")+">"+elem.innerHTML+"</"+name+">";
  };
})(jQuery);

    https://gist.github.com/1102076

    • 0