将 jQuery 对象打印为 HTML答案

【问题标题】：Print out jQuery object as HTML将 jQuery 对象打印为 HTML
【发布时间】：2009-12-07 11:16:29
【问题描述】：

有没有一种将 jQuery 对象打印为纯 HTML 的好方法？

例如：

<img src="example.jpg">

<script>
var img = $('img').eq(0);
console.log(img.toString());
</script>

toString() 不能这样工作。我需要 HTML 等效字符串，即：

<img src="example.jpg">

【问题讨论】：

标签： jquery

【解决方案1】：

$('img')[0].outerHTML

将为您提供页面上第一个 img 的 HTML。然后，您将需要使用 for 循环来获取所有图像的 HTML，或者在图像上放置一个 ID 并仅在 jQuery 选择器中指定它。

【讨论】：

或者，如果您知道 DOM 中您想要 HTML 的特定元素... $('#some .selector')[0].outerHTML 只需确保将其包装在一个if ($('#some .selector').length)

【解决方案2】：

你可以把它包装起来，然后使用 html:

var img = $('img').eq(0);
console.log(img.wrap("<span></span>").parent().html());

【讨论】：

不会修改DOM吗？我们应该先克隆img 吗？

【解决方案3】：

如果您需要以 HTML 格式打印对象，请使用此扩展名outerHTML 或此outerHTML。

更新

更新链接并包含第二个链接的代码：

$.fn.outerHTML = function(){

    // IE, Chrome & Safari will comply with the non-standard outerHTML, all others (FF) will have a fall-back for cloning
    return (!this.length) ? this : (this[0].outerHTML || (
      function(el){
          var div = document.createElement('div');
          div.appendChild(el.cloneNode(true));
          var contents = div.innerHTML;
          div = null;
          return contents;
    })(this[0]));

}

【讨论】：

那么，我真的需要一个扩展吗？它与 Magnar 的示例相同，除了在解析之前进行克隆。
如果同样的事情，但你需要克隆他以继续移动 DOM 中的元素，然后他们将其删除。