如何获取父母有更多孩子的图像HTML？

Question

我想获取图片的整个HTML标记（<img src="url" ... />）。如果我引用它的父代，我可以使用.html()函数：

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

和JQuery：

$('#image').html()

但如果我没有“仅”父母的图像，我该怎么办呢？

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

如果我在这里$('#image').html()，我会得到全部内容。如果我$('#image img').html()，我会得到一个空字符串。

我怎么能在这里获得整个<img>标签？

Answer 1

您可以使用.outerHTML

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

演示：Fiddle

Answer 2

在Javascript中，它就像：

一样简单

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

和 cookie怪物说，

如果不需要IE6 / 7支持，那么一个不错的选择 document.querySelector("#image > img").outerHMTL

<强> DEMO