jQuery获取包含容器本身的容器的html

问题描述

| 我如何在\'＃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>

我有这个在#container中获取html。它不包含#container元素本身。这就是我想要做的

var x = $(\'#container\').html();
$(\'#save\').val(x);

检查http://jsfiddle.net/rzfPP/58/     

解决方法

        如果将容器包装在虚拟

P

标记中，您还将获得容器HTML。 您需要做的就是

var x = $(\'#container\').wrap(\'<p/>\').parent().html();

在http://jsfiddle.net/rzfPP/68/查看工作示例 完成后，向

unwrap()

的

<p>

标签添加

$(\'#container\').unwrap();

    ,        

var x = $(\'#container\').get(0).outerHTML;

更新：Firefox现在从FireFox 11开始支持此功能（2012年3月） 正如其他人指出的那样，这在FireFox中不起作用。如果您需要它在FireFox中工作，那么您可能想看看这个问题的答案： 在jQuery中，是否有任何类似于html（）或text（）的函数，但返回匹配组件的全部内容？     ,        

var x = $(\'#container\')[0].outerHTML;

    ,        我喜欢用这个；

$(\'#container\').prop(\'outerHTML\');

    ,        

$(\'#container\').clone().wrapAll(\"<div/>\").parent().html();

更新：outerHTML现在可以在firefox上使用，因此请使用其他答案，除非您需要支持非常旧的firefox版本     ,        老歌，但戈尔迪... 由于用户要求使用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;
    }
};

来自http://forum.jquery.com/topic/jquery-getting-html-and-the-container-element-12-1-2010     ,        Firefox不支持externalHTML，因此您需要定义一个函数来支持它：

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

然后，您可以使用outerHTML：

var x = outerHTML($(\'#container\').get(0));
$(\'#save\').val(x);

    ,        

var x = $($(\'div\').html($(\'#container\').clone())).html();

    ,        一个例子的简单解决方案：

<div id=\"id_div\">
  <p>content<p>
</div>

将此IDV移至ID = \“ other_div_id \”的其他DIV

$(\'#other_div_id\').prepend( $(\'#id_div\') );

完