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

Question

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

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

Answer 1

Это довольно просто с ванильным JavaScript ...

document.querySelector('#selector')

Answer 2

Коротко и сладко.

[].reduce($('.x'), function(i,v) {return i+v.outerHTML}, '')

или более приятное событие с помощью функций стрелок

[].reduce.call($('.x'), (i,v) => i+v.outerHTML, '')

или вообще без jQuery

[].reduce.call(document.querySelectorAll('.x'), (i,v) => i+v.outerHTML, '')

или, если вам не нравится этот подход, отметьте, что

$('.x').get().reduce((i,v) => i+v.outerHTML, '')

Answer 3

Вот очень оптимизированный плагин externalHTML для jquery: (http://jsperf.com/outerhtml-vs-jquery-clone-hack/5 => 2 других фрагмента быстрого кода не совместимы с некоторыми браузерами, такими как FF <11) </p>

(function($) {

  var DIV = document.createElement("div"),
      outerHTML;

  if ('outerHTML' in DIV) {
    outerHTML = function(node) {
      return node.outerHTML;
    };
  } else {
    outerHTML = function(node) {
      var div = DIV.cloneNode();
      div.appendChild(node.cloneNode(true));
      return div.innerHTML;
    };
  }

  $.fn.outerHTML = function() {
    return this.length ? outerHTML(this[0]) : void(0);
  };

})(jQuery);

@ Andy E => Я не согласен с тобой. externalHMTL не нуждается в геттере и сеттере: jQuery уже дает нам «replaceWith» ...

@ mindplay => Почему вы присоединяетесь ко всем externalHTML? jquery.html возвращает только HTML-содержимое элемента FIRST.

(Извините, у меня недостаточно репутации, чтобы писать комментарии)

Answer 4

$("#myTable").parent().html();

Возможно, я неправильно понимаю ваш вопрос, но при этом получится HTML-код родительского элемента выбранного элемента.

Это то, что вы ищете?

Answer 5

$.html = el => $("<div>"+el+"</div>").html().trim();

Answer 6

$("#myNode").parent(x).html(); 

Где 'x' - номер узла, начиная с 0 в качестве первого, должен получить нужный вам узел, если вы пытаетесь получить конкретный. Если у вас есть дочерние узлы, вам действительно нужно поставить ID на тот, который вы хотите, чтобы просто сосредоточиться на этом. Использование этой методологии, и никакое «х» не сработало для меня.

Answer 7

Простое решение.

var myself = $('#div').children().parent();

Answer 8

Я столкнулся с этим, когда искал ответ на свой вопрос, который заключался в том, что я пытался удалить строку таблицы, а затем добавить ее обратно внизу таблицы (потому что я динамически создавал строки данных, но хотел показать Строка типа «Добавить новую запись» внизу).

У меня была та же проблема: она возвращала innerHtml, поэтому пропускала теги TR, которые содержали идентификатор этой строки и означали, что повторить процедуру было невозможно.

Ответ, который я нашел, состоял в том, что функция jquery remove() на самом деле возвращает удаляемый элемент как объект. Итак, удалить и заново добавить строку было так просто, как это ...

var a = $("#trRowToRemove").remove();            
$('#tblMyTable').append(a);  

Если вы не удаляете объект, но хотите скопировать его в другое место, используйте вместо него функцию clone().