0

Is there a Native Javascript way to get an elements innerHTML AND its own html? How can I get the full html string including the selected element itself?

Hope that makes sense. This example shows a JQuery way to do what I want so hopefully this explains clearly what I am trying to do: http://jquery-howto.blogspot.com/2009/02/how-to-get-full-html-string-including.html

Its not as simple as this is it?

var allHTML = myEle.outerHTML + myEle.innerHTML;
sazr
  • 24,984
  • 66
  • 194
  • 362

4 Answers4

3

The most suitable cross-browser approach is to use features that are most widely supported and avoid things like extending DOM prototypes (since there is no requirement for browsers to implement them and some very common browsers don't) and employ suitable feature tests where appropriate.

A simple getOuterHTML function is:

function getOuterHTML(el) {
  var d;

  if (typeof el.outerHTML == 'string') {
    return el.outerHTML;

  } else {
    d = document.createElement('div');
    d.appendChild(el.cloneNode(true));
    return d.innerHTML;
  }
}

The browser functionality that it depends on has been available in all common browsers since about 2000.

RobG
  • 142,382
  • 31
  • 172
  • 209
2

I think you want to use element.outerHTML. Check out this question for how to do it in a cross-browser way.

Community
  • 1
  • 1
Tikhon Jelvis
  • 67,485
  • 18
  • 177
  • 214
1

You just want outerHTML by itself, not with innerHTML as well:

myEle.outerHTML

Note that this is not currently (December 2011) supported in Firefox, which is probably a deal-breaker. See support matrix at http://www.quirksmode.org/dom/w3c_html.html. However, it will be supported in an upcoming Firefox release. See bug report at https://bugzilla.mozilla.org/show_bug.cgi?id=92264.

It's supported in Chrome, Safari, IE, and Opera.

If you need universal support, see How do I do OuterHTML in firefox?. The accepted answer to that question includes a fallback routine.

Community
  • 1
  • 1
Trott
  • 66,479
  • 23
  • 173
  • 212
  • Yes, that's correct, Chrome, Safari, IE, Opera. Not Firefox, though. – Trott Nov 24 '11 at 22:37
  • Firefox has finally [resolved this issue](https://bugzilla.mozilla.org/show_bug.cgi?id=92264) which was originally filed in 2001, so it should hopefully be showing up soon. – RightSaidFred Nov 25 '11 at 00:57
  • @RightSaidFred—regardless, there will continue to be browsers in use that don't support it, so a feature test and fallback is sensible. – RobG Dec 17 '11 at 12:11
  • @RobG: You're absolutely correct. I was just pointing out that FF is *finally* on board. But yeah, it'll take a while for people to upgrade. Up side is that FF users tend to upgrade pretty aggressively I think. – RightSaidFred Dec 17 '11 at 14:06
1

This should help you, add the function to your project somewhere:

Node.prototype.getHTML = function() {
    var wrap = document.createElement("div");
    var cthis = this.clone();
    wrap.appendChild(cthis);
    return wrap.innerHTML;
}

and then you can call

var allHtml = myEle.getHTML();

The helper function wraps the node temporarily in a div so when it calls innerHTML it grabs all the elements of the original element, It should be cross browser safe too, its part of my toolbox i tend to use for all my projects.

Waltzy
  • 1,113
  • 4
  • 14
  • 31
  • 1
    If it's part of your toolbox, you'll want to update it. `wrap.appendChild(this);` will remove the element from the DOM and place it in the new `div`. You need to make a `.clone()` of the element to prevent that. – RightSaidFred Nov 25 '11 at 00:51
  • noted, I was using this function for elements that were never actually in the dom to begin with (created from strings), cheers for the heads up. – Waltzy Nov 25 '11 at 10:51