Блог Вячеслава Волкова

Кто работает целый день, тому некогда зарабатывать деньги

— Джон Дэвисон Рокфеллер

jQuery outerHTML или как получить html содержимое jQuery объекта

Очень часто мы создаем html объекты в jQuery и еще чаще нам необходимо получать готовую строку html его содержимого. Но возникает небольшая проблема, что при вызове метода html() мы получаем не все содержимое, а дочернего элемента. Что бы избежать этого и получать весь нужный html напишем небольшой плагин для jQuery.Вот пример проблемы:

var $div = $('<div>');
$div.addClass('new-div');
$div.html('<a href="#">ссылка</a>');

console.log($div.html());

В итоге мы получим вот такую строчку:

<a href="#">ссылка</a>

Что бы нам получить html включая сам контейнер объекта, то воспользуемся вот таким небольшим плагином.

jQuery.fn.outerHTML = function(s) {
        return s
            ? this.before(s).remove()
            : jQuery("<p>").append(this.eq(0).clone()).html();
    };

Теперь просто вызовем метод outerHTML у объекта $div и получим нужный нам html.

console.log($div.outerHTML());
// <div class="new-div"><a href="#">ссылка</a></div>

// UPD новое решение

Оказывается есть более простое решение

var $div = $('<div>');
$div.addClass('new-div');
$div.html('<a href="#">ссылка</a>');

console.log($div.get(0));
VeXell

Возможно вам интересно также будет

  • всё проще

    $div[0].outerHTML;

  • Спасибо большое, искал полчаса не мог найти.

  • Max

    console.log($div.get(0));
    Получим не строку с html, а объект.