javascript - How to get Dom object's content include itself? - Stack Overflow

admin管理员组

文章数量:1336596

I want to able to get #post content include itself. jQuery's html() method only return content that does not include itself.Trying to get parent object's html does not work in all situation because that object can have siblings.

What is solution for this ?

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

I want to able to get #post content include itself. jQuery's html() method only return content that does not include itself.Trying to get parent object's html does not work in all situation because that object can have siblings.

What is solution for this ?

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

• javascript
• jquery

Share Improve this question Follow asked Jan 15, 2012 at 18:00 AnyOneAnyOne 93122 gold badges1212 silver badges4242 bronze badges 2

• 1 Why do you want an elements html? That's bad practice. – Raynos Commented Jan 15, 2012 at 18:10
• He just wants it, that's all we have to worry about. – Ralph Lavelle Commented May 8, 2013 at 5:55

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

Description

jQuery's html() gives you only the innerHTML right. You can do

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

to get the full html but this is not crosser browser patible.

Check out this jsFiddle Demonstration

You can use this plugin to get a cross browser patible function .outerHTML()

More Information

• jQuery - OuterHTML Plugin
• jQuery.html()

You can clone the element in question and append the clone to a new element. Then you can get the HTML of the new element:

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

you can wrap it around a virtual div using clone so infect you wont disturb the DOM.

you can try like this

$('#post').clone().wrap('<div>').parent().html();

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;
    }
  });
}

If outerHTML is not precent the following should shim it. This means you can just do

document.getElementById("post").outerHTML;

Demo

Maybe something like this:

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

Fiddle!

本文标签： javascriptHow to get Dom object39s content include itselfStack Overflow