JQuery get html контейнера, включая сам контейнер

Как получить html в '#container', включая '#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>

У меня есть это, которое получает html внутри #container. он не включает в себя элемент #container. Это то, что я ищу сделать

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

Проверить http://jsfiddle.net/rzfPP/58/

Ответы

Ответ 1

Если вы завернете контейнер в фиктивный тег P, вы также получите HTML-код контейнера.

Все, что вам нужно сделать, это

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

Проверьте рабочий пример http://jsfiddle.net/rzfPP/68/

В unwrap() тег <p>, когда закончите, вы можете добавить

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

Ответ 2

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

UPDATE: теперь это поддерживается Firefox как FireFox 11 (март 2012 г.)

Как отмечали другие, это не будет работать в FireFox. Если вам нужно, чтобы он работал в FireFox, вы можете взглянуть на ответ на этот вопрос: В jQuery есть ли какая-либо функция, похожая на html() или text(), но возвращает все содержимое согласованного компонента?

Ответ 3

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

Ответ 4

Мне нравится использовать это;

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

Ответ 5

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

Обновление: outerHTML теперь работает с firefox, поэтому используйте другой ответ, если вам не нужно поддерживать очень старые версии firefox

Ответ 6

Старый, но золотой...

Поскольку пользователь запрашивает jQuery, я буду держать его простым:

var html = $('#container').clone();
console.log(html);

Заклинание здесь.

Ответ 7

$.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

Ответ 8

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

Ответ 9

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

Затем вы можете использовать outerHTML:

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

Ответ 10

Простое решение с примером:

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

Переместите этот DIV в другой DIV с id = "other_div_id"

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

Готово