How to get an image HTML which parent has more children?

Question

I want to get the whole HTML tag of an image (<img src="url" ... />). I can do it with .html() function if I refer to its parent:

<div id="image">
  <img src="url" />
</div>

and with JQuery:

$('#image').html()

But how could I do it if I don't have an image "only" parent:

<div id="image">
  <img src="url" />
  <!-- Here some stuff. E.g. -->
  <div><p>Something</p></div>
</div>

If I do $('#image').html() here, I'll get the whole content. If I do $('#image img').html() I'll get an empty string.

How could I get the whole <img> tag here?

possible duplicate of [jQuery get image's HTML as string](http://stackoverflow.com/questions/17516665/jquery-get-images-html-as-string) — iConnor, Jan 11 '14 at 01:25

score 4 · Accepted Answer · answered Jan 11 '14 at 01:16

4

You can use .outerHTML

$('#image img').prop('outerHTML')
$('#image img')[0].outerHTML //in this case you need to test whether $('#image img')[0] exists

answered Jan 11 '14 at 01:16

Arun P Johny

@ManoloSalsas: Be aware that this won't work below Firefox 11. – cookie monster Jan 11 '14 at 01:30

Cilan · Answer 2 · 2014-01-11T17:54:05.243

4

In Javascript, it's as simple as:

document.getElementById('image').getElementsByTagName('img')[0].outerHTML

and as cookie monster says,

A nice alternative if IE6/7 support isn't needed would be document.querySelector("#image > img").outerHMTL

edited Jan 11 '14 at 17:54

answered Jan 11 '14 at 01:16

Cilan

I didn't downvote, but this has the same problem as `.html()` mentioned in the question - OP wants the _outer_ html... – nnnnnn Jan 11 '14 at 01:18
It doesn't make sense to this when you are using jQuery – iConnor Jan 11 '14 at 01:23
@connorspiracist I'm just giving alternatives, in case there's somebody who looks here who *isn't* using **JQuery.** – Cilan Jan 11 '14 at 15:35
A nice alternative if IE6/7 support isn't needed would be `document.querySelector("#image > img").outerHMTL` – cookie monster Jan 11 '14 at 17:52
@cookiemonster Do I have to list *everything?* Edited :) – Cilan Jan 11 '14 at 17:53
Yes... yes you do. ;-) – cookie monster Jan 11 '14 at 17:59

2 Answers2