[英]jQuery get html of container including the container itself
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. 我有这个获取#container内的html。 it does not include the #container element itself. 它不包括#container元素本身。 That's what i'm looking to do 这就是我想要做的
var x = $('#container').html();
$('#save').val(x);
Check http://jsfiddle.net/rzfPP/58/ 查看http://jsfiddle.net/rzfPP/58/
If you wrap the container in a dummy P
tag 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();
var x = $('#container').get(0).outerHTML;
UPDATE : This is now supported by Firefox as of FireFox 11 (March 2012) 更新 :自FireFox 11开始支持Firefox(2012年3月)
As others have pointed out, this will not work in FireFox. 正如其他人所指出的,这在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中工作,那么你可能想看看这个问题的答案: 在jQuery中,是否有任何类似于html()或text()的函数但是返回匹配组件的全部内容?
var x = $('#container')[0].outerHTML;
我喜欢用这个;
$('#container').prop('outerHTML');
$('#container').clone().wrapAll("<div/>").parent().html();
更新:outerHTML现在可以在firefox上运行,所以除非你需要支持非常旧版本的firefox,否则请使用其他答案
Oldie but goldie... Oldie但是goldie ......
Since user is asking for jQuery, I'm going to keep it simple: 由于用户要求jQuery,我将保持简单:
var html = $('#container').clone();
console.log(html);
$.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
var x = $($('div').html($('#container').clone())).html();
Firefox doesn't support outerHTML , so you need to define a function to 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);
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 完
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.