Получить внешний HTML-код выбранного элемента

Question

Я пытаюсь получить HTML-код выбранного объекта с помощью jQuery. Мне известна функция .html(); проблема в том, что мне нужен HTML, включая выбранный объект (в данном случае строка таблицы, где .html() возвращает только ячейки внутри строки).

Я искал и нашел несколько очень «хакерских» методов клонирования объекта, добавления его во вновь созданный div и т. Д., И т. Д., Но это кажется очень грязным. Есть ли лучший способ, или новая версия jQuery (1.4.2) предлагает какую-либо функциональность outerHtml?

Answer 1

Я использовал решение Джессики (отредактированное Джошем), чтобы заставить externalHTML работать на Firefox. Проблема, однако, в том, что мой код ломался, потому что ее решение обернуло элемент в DIV. Добавление еще одной строки кода решило эту проблему.

Следующий код дает вам externalHTML, оставляя дерево DOM без изменений.

$jq.fn.outerHTML = function() {
    if ($jq(this).attr('outerHTML'))
        return $jq(this).attr('outerHTML');
    else
    {
    var content = $jq(this).wrap('<div></div>').parent().html();
        $jq(this).unwrap();
        return content;
    }
}

И используйте это так: $ ("# myDiv"). OuterHTML ();

Надеюсь, кто-то найдет это полезным!

Answer 2

// no cloning necessary    
var x = $('#xxx').wrapAll('<div></div>').parent().html(); 
alert(x);

Скрипка здесь: http://jsfiddle.net/ezmilhouse/Mv76a/

Answer 3

Если сценарий динамически добавляет новую строку, вы можете использовать это:

var row = $(".myRow").last().clone();
$(".myRow").last().after(row);

.myrow является именем класса <tr>. Он создает копию последней строки и вставляет ее как новую последнюю строку. Это также работает в IE7 , в то время как метод [0].outerHTML не позволяет присваивания в ie7

Answer 4

Я использовал решение Volomike, обновленное Джессикой. Просто добавили проверку, чтобы увидеть, существует ли элемент, и сделали его пустым, если его нет.

jQuery.fn.outerHTML = function() {
return $(this).length > 0 ? $(this).clone().wrap('<div />').parent().html() : '';
};

Конечно, используйте это как:

$('table#buttons').outerHTML();

Answer 5

node.cloneNode () вряд ли выглядит как взлом. Вы можете клонировать узел и добавить его к любому желаемому родительскому элементу, а также манипулировать им, манипулируя отдельными свойствами, вместо того, чтобы, например, запустите на нем регулярные выражения или добавьте его в DOM, а затем управляйте им после слов.

Тем не менее, вы также можете перебирать атрибуты элемента , чтобы создать его представление в виде строки HTML. Кажется вероятным, что именно так будет реализована любая функция externalHTML, если бы jQuery добавил ее.

Answer 6

Я сделал этот простой тест с externalHTML, представляющим собой решение токимона (без клона), и outerHTML2, представляющим собой решение jessica (клон)

console.time("outerHTML");
for(i=0;i<1000;i++)
 {                 
  var html = $("<span style='padding:50px; margin:50px; display:block'><input type='text' title='test' /></span>").outerHTML();
 }                 
console.timeEnd("outerHTML");

console.time("outerHTML2");

 for(i=0;i<1000;i++)
 {                 
   var html = $("<span style='padding:50px; margin:50px; display:block'><input type='text' title='test' /></span>").outerHTML2();
  }                 
  console.timeEnd("outerHTML2");

и в моем браузере Chromium (версия 20.0.1132.57 (0)) был

externalHTML: 81мс
externalHTML2: 439 мс

но если мы используем решение Tokimon без встроенной функции externalHTML (которая теперь поддерживается, вероятно, почти во всех браузерах)

получаем

externalHTML: 594ms
externalHTML2: 332 мс

и в примерах реального мира будет больше циклов и элементов, поэтому идеальная комбинация будет

$.fn.outerHTML = function() 
{
  $t = $(this);
  if( "outerHTML" in $t[0] ) return $t[0].outerHTML; 
  else return $t.clone().wrap('<p>').parent().html(); 
}

так что метод клонирования на самом деле быстрее, чем метод wrap / unwrap
(запрос 1.7.2)

Answer 7

Хороший вариант .outerHTML () вы можете найти здесь https://github.com/darlesson/jquery-outerhtml.

В отличие от .html (), который возвращает только HTML-содержимое элемента, эта версия .outerHTML () возвращает выбранный элемент и его HTML-содержимое или заменяет его как метод .replaceWith (), но с той разницей, что позволяет заменять HTML на наследуется цепочкой.

Примеры также можно увидеть в URL выше.

Answer 8

Обратите внимание, что решение Джоша работает только для одного элемента.

Возможно, «внешний» HTML действительно имеет смысл, только когда у вас есть один элемент, но есть ситуации, когда имеет смысл взять список элементов HTML и превратить их в разметку.

Расширяя решение Джоша, оно будет обрабатывать несколько элементов:

(function($) {
  $.fn.outerHTML = function() {
    var $this = $(this);
    if ($this.length>1)
      return $.map($this, function(el){ return $(el).outerHTML(); }).join('');
    return $this.clone().wrap('<div/>').parent().html();
  }
})(jQuery);

Редактировать: исправлена ​​еще одна проблема с решением Джоша, см. Комментарий выше.

Answer 9

Другое подобное решение с добавлением remove() временного объекта DOM.

Answer 10

Это отлично подходит для изменения элементов в dom, но НЕ работает, например, при передаче html-строки в jquery, например:

$('<div id="foo">Some <span id="blog">content</span></div>').find('#blog').outerHTML();

После некоторых манипуляций я создал функцию, которая позволяет работать с вышеупомянутым, т.е. для строк html:

$.fn.htmlStringOuterHTML = function() {     
    this.parent().find(this).wrap('<div/>');        
    return this.parent().html();
};