blocks|key|1154746|text|您可以克隆它以获得完整的内容，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1154747|var+html+=+$("<div+/>").append($("#div1").clone()).html();|code-block|syntax|javascript|1154748|或者让它成为一个插件，大多数人倾向于将其称为"outerHTML"，就像这样：|1154749|jQuery.fn.outerHTML+=+function()+{
++return+jQuery('<div+/>').append(this.eq(0).clone()).html();
};|1154750|然后你可以直接调用：|1154751|var+html+=+$("#div1").outerHTML();|1154752|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>You can clone it to get the entire contents, like this:</p>

<pre><code>var html = $("&lt;div /&gt;").append($("#div1").clone()).html();
</code></pre>

<p>Or make it a plugin, most tend to call this "outerHTML", like this:</p>

<pre><code>jQuery.fn.outerHTML = function() {
  return jQuery('&lt;div /&gt;').append(this.eq(0).clone()).html();
};
</code></pre>

<p>Then you can just call:</p>

<pre><code>var html = $("#div1").outerHTML();
</code></pre>


blocks|key|1154811|text|在典型用例中，差异可能没有意义，但使用标准DOM功能|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1154812|$("#el")[0].outerHTML|code-block|syntax|javascript|1154813|的速度大约是|1154814|$("<div+/>").append($("#el").clone()).html();|1154815|所以我会这么说：|1154816|/*+
+*+Return+outerHTML+for+the+first+element+in+a+jQuery+object,
+*+or+an+empty+string+if+the+jQuery+object+is+empty;++
+*/
jQuery.fn.outerHTML+=+function()+{
+++return+(this[0])+?+this[0].outerHTML+:+'';++
};|1154817|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>Differences might not be meaningful in a typical use case, but using the standard DOM functionality</p>

<pre><code>$("#el")[0].outerHTML
</code></pre>

<p>is about twice as fast as </p>

<pre><code>$("&lt;div /&gt;").append($("#el").clone()).html();
</code></pre>

<p>so I would go with:</p>

<pre><code>/* 
 * Return outerHTML for the first element in a jQuery object,
 * or an empty string if the jQuery object is empty;  
 */
jQuery.fn.outerHTML = function() {
   return (this[0]) ? this[0].outerHTML : '';  
};
</code></pre>


blocks|key|1154916|text|您可以使用Jquery的Clone()方法轻松地获取孩子本身和它的所有后代(孩子)，只需|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1154917|var+child+=+$('#div+div:nth-child(1)').clone();++

var+child2+=+$('#div+div:nth-child(2)').clone();|code-block|syntax|javascript|1154918|在第一次查询时，您将得到以下内容|1154919|<div+id="div1">
+++++<p>Some+Content</p>
</div>|1154920|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>You can easily get child itself and all of its decedents (children) with Jquery's Clone() method, just</p>

<pre><code>var child = $('#div div:nth-child(1)').clone();  

var child2 = $('#div div:nth-child(2)').clone();
</code></pre>

<p>You will get this for first query as asked in question</p>

<pre><code>&lt;div id="div1"&gt;
     &lt;p&gt;Some Content&lt;/p&gt;
&lt;/div&gt;
</code></pre>


blocks|key|1154974|text|你只需要一行代码就可以做到这一点，它简化了这个过程：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1154975|$('#divs').get(0).outerHTML;|offset|length|style|CODE|1154976|就这么简单。|1154977|entityMap^0|0|0|S|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@$D|N|E|O|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|P|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|K|$]]

<p>You can achieve that with just one line code that simplify that:</p>

<p><code>$('#divs').get(0).outerHTML;</code></p>

<p>As simple as that.</p>


<p>I wish to get the entire html of a selected element not just it's contents. .html() uses javascripts innerHTML() method according to the documentation. 
HTML:</p>

<pre><code>&lt;div id="divs"&gt;
  &lt;div id="div1"&gt;
    &lt;p&gt;Some Content&lt;/p&gt;
  &lt;/div&gt;
  &lt;div id="div2"&gt;
    &lt;p&gt;Some Content&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Using <code>$('#divs:first').html();</code> will return just the paragraph element. I want to get the html for the whole element, like so:</p>

<pre><code>  &lt;div id="div1"&gt;
    &lt;p&gt;Some Content&lt;/p&gt;
  &lt;/div&gt;
</code></pre>

<p>I can't use .parent because this will return html of both child divs.</p>


jQuery, get html of a whole element

jQuery

我希望获得所选元素的整个html，而不仅仅是它的内容。根据文档，.html()使用javascripts innerHTML()方法。HTML：<div id="divs">  <div id="div1">    <p>Some Content</p>  </div>  <div id="div2">    <p>S...

问jQuery，获取整个元素的html
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery，获取整个元素的htmlEN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery，获取整个元素的html
EN