Javascript jQuery 获取容器的 html，包括容器本身
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6459398/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery get html of container including the container itself
提问by Pinkie
How do i get the html on '#container' including '#container' and not just what's inside it.
我如何获取 '#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>
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
我有这个可以在#container 中获取 html。它不包括#container 元素本身。这就是我想要做的
var x = $('#container').html();
$('#save').val(x);
回答by Hussein
If you wrap the container in a dummy Ptag you will get the container HTML also.
如果您将容器包装在一个虚拟P标签中，您还将获得容器 HTML。
All you need to do is
你需要做的就是
var x = $('#container').wrap('<p/>').parent().html();
Check working example at http://jsfiddle.net/rzfPP/68/
在http://jsfiddle.net/rzfPP/68/检查工作示例
To unwrap()the <p>tag when done, you can add
要unwrap()在<p>完成后的标签，你可以添加
$('#container').unwrap();
回答by ShaneBlake
var x = $('#container').get(0).outerHTML;
UPDATE: This is now supported by Firefox as of FireFox 11 (March 2012)
更新：从 FireFox 11（2012 年 3 月）开始，Firefox 现在支持此功能
As others have pointed out, this will not work in FireFox. If you need it to work in FireFox, then you might want to take a look at the answer to this question : In jQuery, are there any function that similar to html() or text() but return the whole content of matched component?
正如其他人指出的那样，这在 FireFox 中不起作用。如果你需要它在 FireFox 中工作，那么你可能想看看这个问题的答案： 在 jQuery 中，是否有任何类似于 html() 或 text() 的函数但返回匹配组件的全部内容？
回答by MikeM
var x = $('#container')[0].outerHTML;
回答by 1.44mb
I like to use this;
我喜欢用这个；
$('#container').prop('outerHTML');
回答by Robert Noack
$('#container').clone().wrapAll("<div/>").parent().html();
Update: outerHTML works on firefox now so use the other answer unless you need to support very old versions of firefox
更新：outerHTML 现在可以在 Firefox 上使用，所以除非您需要支持非常旧版本的 Firefox，否则请使用其他答案
回答by prinsen
Oldie but goldie...
老歌但金...
Since user is asking for jQuery, I'm going to keep it simple:
由于用户要求使用 jQuery，我将保持简单：
var html = $('#container').clone();
console.log(html);
回答by Achu Sreedhar
$.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;
}
};
from http://forum.jquery.com/topic/jquery-getting-html-and-the-container-element-12-1-2010
来自http://forum.jquery.com/topic/jquery-getting-html-and-the-container-element-12-1-2010
回答by kevinji
Firefox doesn't support outerHTML, so you need to define a functionto help support it:
Firefox 不支持 outerHTML，因此您需要定义一个函数来帮助支持它：
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);
}
Then, you can use outerHTML:
然后，您可以使用outerHTML：
var x = outerHTML($('#container').get(0));
$('#save').val(x);
回答by kei
var x = $($('div').html($('#container').clone())).html();
回答by hassane86
Simple solution with an example :
一个例子的简单解决方案：
<div id="id_div">
<p>content<p>
</div>
Move this DIV to other DIV with id = "other_div_id"
将此 DIV 移动到 id = "other_div_id" 的其他 DIV
$('#other_div_id').prepend( $('#id_div') );
Finish
结束
