blocks|key|641377|text|我喜欢用这个；|type|unstyled|depth|inlineStyleRanges|entityRanges|data|641378|$('#container').prop('outerHTML');|code-block|syntax|javascript|641379|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I like to use this;</p>

<pre><code>$('#container').prop('outerHTML');
</code></pre>


blocks|key|641132|text|var+x+=+$('#container')[0].outerHTML;|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|641133|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>var x = $('#container')[0].outerHTML;
</code></pre>


blocks|key|641210|text|$('#container').clone().wrapAll("<div/>").parent().html();|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|641211|更新:+outerHTML现在可以在火狐上工作，所以除非你需要支持非常老的火狐版本，否则请使用另一个答案|unstyled|641212|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>$('#container').clone().wrapAll("&lt;div/&gt;").parent().html();
</code></pre>

<p>Update: outerHTML works on firefox now so use the other answer unless you need to support very old versions of firefox</p>


blocks|key|641447|text|老古董但是戈尔蒂。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|641448|由于用户请求的是jQuery，因此我将保持简单：|641449|var+html+=+$('#container').clone();
console.log(html);|code-block|syntax|javascript|641450|Fiddle+here.|offset|length|641451|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/962ausaf/4/^0|0|0|0|0|C|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<p>Oldie but goldie...</p>

<p>Since user is asking for jQuery, I'm going to keep it simple:</p>

<pre><code>var html = $('#container').clone();
console.log(html);
</code></pre>

<p><a href="https://jsfiddle.net/962ausaf/4/" rel="nofollow noreferrer">Fiddle here.</a></p>


blocks|key|641248|text|$.fn.outerHtml+=+function(){
++++if+(this.length)+{
++++++++var+div+=+$('<div+style="display:none"></div>');
++++++++var+clone+=
++++++++$(this[0].cloneNode(false)).html(this.html()).appendTo(div);
++++++++var+outer+=+div.html();
++++++++div.remove();
++++++++return+outer;
++++}
++++else+{
++++++++return+null;
++++}
};|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|641249|来自http://forum.jquery.com/topic/jquery-getting-html-and-the-container-element-12-1-2010|unstyled|offset|length|641250|entityMap|0|LINK|mutability|MUTABLE|url|http://forum.jquery.com/topic/jquery-getting-html-and-the-container-element-12-1-2010^0|0|2|2D|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|R|8|@]|9|@$G|S|H|T|1|U]]|A|$]]|$1|I|3|-4|5|F|7|V|8|@]|9|@]|A|$]]]|J|$K|$5|L|M|N|A|$O|P]]]]

<pre><code>$.fn.outerHtml = function(){
    if (this.length) {
        var div = $('&lt;div style="display:none"&gt;&lt;/div&gt;');
        var clone =
        $(this[0].cloneNode(false)).html(this.html()).appendTo(div);
        var outer = div.html();
        div.remove();
        return outer;
    }
    else {
        return null;
    }
};
</code></pre>

<p>from <a href="http://forum.jquery.com/topic/jquery-getting-html-and-the-container-element-12-1-2010" rel="nofollow noreferrer">http://forum.jquery.com/topic/jquery-getting-html-and-the-container-element-12-1-2010</a></p>


blocks|key|858520|text|var+x+=+$($('div').html($('#container').clone())).html();|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|858521|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>var x = $($('div').html($('#container').clone())).html();
</code></pre>


blocks|key|641288|text|Firefox+doesn't+support+outerHTML，所以你需要define+a+function来帮助支持它：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|641289|function+outerHTML(node)+{
++++return+node.outerHTML+%7C%7C+(
++++++++function(n)+{
++++++++++++var+div+=+document.createElement('div');
++++++++++++div.appendChild(+n.cloneNode(true)+);
++++++++++++var+h+=+div.innerHTML;
++++++++++++div+=+null;
++++++++++++return+h;
++++++++}
++++)(node);
}|code-block|syntax|javascript|641290|然后，您可以使用outerHTML：|641291|var+x+=+outerHTML($('#container').get(0));
$('#save').val(x);|641292|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/1700870/how-do-i-do-outerhtml-in-firefox|1|https://stackoverflow.com/questions/1700870/how-do-i-do-outerhtml-in-firefox/3819589#3819589^0|0|X|0|13|H|1|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]|$A|10|B|11|1|12]]|C|$]]|$1|D|3|E|5|F|7|13|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|14|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|15|8|@]|9|@]|C|$G|H]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]|U|$5|P|Q|R|C|$S|V]]]]

<p><a href="https://stackoverflow.com/questions/1700870/how-do-i-do-outerhtml-in-firefox">Firefox doesn't support outerHTML</a>, so you need to <a href="https://stackoverflow.com/questions/1700870/how-do-i-do-outerhtml-in-firefox/3819589#3819589">define a function</a> to help support it:</p>

<pre><code>function outerHTML(node) {
    return node.outerHTML || (
        function(n) {
            var div = document.createElement('div');
            div.appendChild( n.cloneNode(true) );
            var h = div.innerHTML;
            div = null;
            return h;
        }
    )(node);
}
</code></pre>

<p>Then, you can use outerHTML:</p>

<pre><code>var x = outerHTML($('#container').get(0));
$('#save').val(x);
</code></pre>


blocks|key|641344|text|简单的解决方案，举个例子：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|641345|<div+id="id_div">
++<p>content<p>
</div>|code-block|syntax|javascript|641346|将此DIV移至id+=+"other_div_id“的其他DIV|641347|$('#other_div_id').prepend(+$('#id_div')+);|641348|完成|641349|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Simple solution with an example :</p>

<pre><code>&lt;div id="id_div"&gt;
  &lt;p&gt;content&lt;p&gt;
&lt;/div&gt;
</code></pre>

<p>Move this DIV to other DIV with id = "other_div_id"</p>

<pre><code>$('#other_div_id').prepend( $('#id_div') );
</code></pre>

<p>Finish</p>


<p>How do i get the html on '#container' including '#container' and not just what's inside it. </p>

<pre><code>&lt;div id="container"&gt;
 &lt;div id="one"&gt;test 1 &lt;/div&gt;
 &lt;div id="two"&gt;test 2 &lt;/div&gt;
 &lt;div id="three"&gt;test 3 &lt;/div&gt;
 &lt;div id="four"&gt;test 4 &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>I have this which gets the html inside #container. it does not include the #container element itself. That's what i'm looking to do</p>

<pre><code>var x = $('#container').html();
$('#save').val(x);
</code></pre>

<p>Check <a href="http://jsfiddle.net/rzfPP/58/" rel="noreferrer">http://jsfiddle.net/rzfPP/58/</a></p>


jQuery get html of container including the container itself

容器

jQuery

如何获取“#container”上的html，包括“#container”，而不仅仅是其中的内容。<div id="container"> <div id="one">test 1 </div> <div id="two">test 2 </div> <div id="three">test 3 </div> <div id="four">test 4 </div></div>我有一个在#容器中获

问jQuery获取容器的html，包括容器本身
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery获取容器的html，包括容器本身EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery获取容器的html，包括容器本身
EN