如何获取Dom对象的内容包括其自身？

Question

我希望能够将#post内容包括在内。 jQuery的html（）方法只返回不包含自身的内容。想要获取父对象的html并不适用于所有情况，因为该对象可以有兄弟姐妹。

这是什么解决方案？

<div id="post">
     <div>content</div>
<div>
<div></div>

Answer 1

描述

jQuery的html()只为你提供了innerHTML权限。你可以做到

$("#post")[0].outerHTML

获取完整的html ，但这不是与crosser浏览器兼容的。

查看此jsFiddle Demonstration

您可以使用this插件获取跨浏览器兼容的功能.outerHTML()

更多信息

• jQuery - OuterHTML Plugin
• jQuery.html()

Answer 2

您可以克隆有问题的元素，并将克隆附加到新元素。然后你可以得到新元素的HTML：

var html = $("<div>").append($("#post").clone()).html();

Answer 3

您可以wrap使用div clone围绕虚拟DOM感染您不会打扰$('#post').clone().wrap('<div>').parent().html(); 。

你可以这样尝试

{{1}}

Answer 4

if (!Element.prototype.hasOwnProperty("outerHTML")) {
  Object.defineProperty(Element.prototype, "outerHTML", {
    configurable: true,
    get: function getOuterHTML() {
      var html = this.innerHTML;
      var tag = "<" + this.tagName;
      var closeTag = "</" + this.tagName + ">";
      [].forEach.call(this.attributes, function (attr) {
        tag += attr.nodeName + '="' + attr.nodeValue + '"';
      });
      tag += ">";
      return tag + html + closeTag;
    }
  });
}

如果outerHTML不是precent，则以下内容应该填充它。这意味着你可以做到

document.getElementById("post").outerHTML;

Demo

Answer 5

也许是这样的：

var elem = $("#post").clone().wrap('<div>').parent().html();

Fiddle!