-2

Rather an odd request, I'm sure, but given a Jquery selector, can I get the raw HTML of an item (and its children) so that I could, for example, put an escaped version of that HTML back on the page?

I'm happy doing the escaping, I've just no idea how to return the HTML from an object.

If there's a simple DOM-standard way of doing this too, I'm just as happy with that.

Edit to addresss the "Oh why didn't you just Google that": Google it. You'll get Jquery's .html() and that will give you the inner HTML of an object. For example, let'sa say you have:

<div id="pants">naughty bits</div>

.html() will only return naughty bits. while the output I'm looking for is <div id="pants">naughty bits</div>

Oli
  • 235,628
  • 64
  • 220
  • 299
  • 8
    I don't believe that simply googling this wouldn't have given you the solution... – Praxis Ashelin Nov 05 '13 at 11:58
  • You can't get the original source---but yes, using `html()` you can get the browser's DOM-rendered source as HTML. – Andrew Cheong Nov 05 '13 at 12:01
  • Per Archer's answer, this isn't as simple as `.html()` which *is* what you get if you Google. I've included an example in my question to explain why it's not the answer and why I'm not a *complete* Hodor. – Oli Nov 05 '13 at 12:06

4 Answers4

17

If you have the ID then you can do it like this...

jQuery

$("#ID")[0].outerHTML;

Pure Javascript

document.getElementById("ID").outerHTML;

Using .html() will only get the inner html and not include the element you specify by ID.

Update

There is now also a jQuery method to get the outer HTML of an element...

$("#ID").outerHTML();
Reinstate Monica Cellio
  • 25,975
  • 6
  • 51
  • 67
2

Yes, html() method of jquery return html data with all tags as an string: Example:

Html Source

<div id="DivId">
    <p> This is html concept </p>
    <br/>
    <p> This is jquery concept. </p>
</div>

Jquery Code

var htmlString=$("#DivId").html();

Return Result is: htmlString:

    <p> This is html concept </p>
    <br/>
    <p> This is jquery concept. </p>
Ramakant Shukla
  • 137
  • 1
  • 10
0

Yes its possible use html()

var source=$('#ID').html()
Sridhar R
  • 20,190
  • 6
  • 38
  • 35
0

given a Jquery selector, can I get the raw HTML of an item (and its children)

Get the value using the .html() method:

var htmlOutput = $('#myselector').html();

...so that I could, for example, put an escaped version of that HTML back on the page?

Use the.text() method to set the string as plain text:

$('#anotherselector').text(htmlOutput);

(ie jQuery will fully escape it for you; you don't need to do it manually)

Spudley
  • 166,037
  • 39
  • 233
  • 307
  • As others have pointed out, `.html()` (and text) is only suitable for inner HTML. It won't include the element I'm talking about (which is what I want too). – Oli Nov 05 '13 at 12:02
  • @Oli `.text()` here is used as a setter, so it really has nothing to do with the distinction of `outer/innerHTML`. – Yoshi Nov 05 '13 at 12:05
  • @Oli - No worries; Archer has given you a good answer for that so I won't repeat what he's already said. I posted my answer mainly to demonstrate that you don't need any escaping with `.text()`; none of the other answers picked up on that, so I felt I should add something. – Spudley Nov 05 '13 at 12:07