Как преобразовать элемент в строку с помощью jQuery

Question

Мне не нужен innerHTML, мне нужен innerHTML с тегами. Давайте напишем пример:

<div id="1" style="qwe"><span class="1"></span></div>
<div id="2" style="asd"><span class="2"></span></div>
<div id="3" style="zxc"><span class="3"></span></div>

Я могу получить элемент по id:

$("#1")

И как я могу получить такую ​​строку:

<div id="1" style="qwe"><span class="1"></span></div>

Конечно, html () не работает, потому что он вернет только span.

Answer 1

вы могли бы сделать что-то вроде этого:

alert( $('#\\31 ').wrap("<div />").parent().html() )
$('#\\31 ').unwrap()

Answer 2

Примерно так должно работать нормально:

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

var outer = $("#1").outerHTML();

Вот рабочая скрипка .

Дополнительная информация

См. http://www.yelotofu.com/2008/08/jquery-outerhtml/ для оригинальной статьи.

Answer 3

Используйте этот плагин jQuery: https://github.com/brandonaaron/jquery-outerhtml/blob/master/jquery.outerhtml.js

/*! Copyright (c) 2006 Brandon Aaron (brandon.aaron@gmail.com || http://brandonaaron.net)
 * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) 
 * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
 */

(function($){
  var div;

  $.fn.outerHTML = function() {
    var elem = this[0],
      tmp;

    return !elem ? null
      : typeof ( tmp = elem.outerHTML ) === 'string' ? tmp
      : ( div = div || $('<div/>') ).html( this.eq(0).clone() ).html();
  };

})(jQuery);

Используйте его следующим образом:

$('#some-element').outerHTML();

Answer 4

Вы можете использовать outerhtml, но в JavaScript вместо DOM, а не jQuery, например:

  var text = document.getElementById('hello').outerHTML;

jsbin код для демонстрации: http://jsbin.com/obutul/edit#javascript,html,live

Answer 5

outerHTML теперь реализован практически во всех браузерах (включая старые версии ie - только Firefox тянет его за ноги, но он запланирован на v11 ), поэтому я адаптировал ответ @James Hill киспользуйте эту встроенную функциональность там, где она есть, так как она должна быть более эффективной.

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

var outer = $("#1").outerHTML();

Имейте в виду, что существует несколько кросс-браузерных несоответствий в externalHTML (например, посмотрите эту страницу в chromeи сравнить с т. е.)

Answer 6

Вы можете заключить желаемый div в другой div и затем извлечь html родительского div.

<div><div id="1" style="qwe"><span class="1"></span></div></div>
<div><div id="2" style="asd"><span class="2"></span></div></div>
<div><div id="3" style="zxc"><span class="3"></span></div></div>

Теперь

$("#1").parent().html() извлечет нужную строку.

Answer 7

Существует также свойство outerHTML для html-элементов, которое включает в себя сам выбранный элемент.