Я пытаюсь получить HTML-код выбранного объекта с помощью jQuery. Я знаю о .html()
функции; проблема в том, что мне нужен HTML, включая выбранный объект (в данном случае строка таблицы, в которой .html()
возвращаются только ячейки внутри строки).
Я искал и нашел несколько очень «хакерских» методов клонирования объекта, добавления его во вновь созданный div и т. Д., И т. Д., Но это кажется очень грязным. Есть ли лучший способ, или новая версия jQuery (1.4.2) предлагает какую-либо outerHtml
функциональность?
$('div')[0].outerHTML
,Ответы:
Редактирование 2014 года: вопрос и этот ответ относятся к 2010 году. В то время лучшего решения не было. Теперь многие другие ответы лучше: например, Эрика Ху или Ре Капчи.
Этот сайт, кажется, имеет решение для вас: jQuery: outerHTML | Yelotofu
источник
outerHTML
поддерживается в Firefox только с версии 11 (март 2012 г.).outerHTML
это собственный атрибут, изобретенный Microsoft, а не стандарт W3C. (Интересный факт:innerHTML
стандартизирован только с HTML5 )el.outerHTML || document.createElement('div').appendChild( el.cloneNode( true ) ).parentNode.innerHTML
Я считаю, что в настоящее время (5/1/2012) все основные браузеры поддерживают функцию externalHTML. Мне кажется, что этого фрагмента достаточно. Я лично хотел бы запомнить это:
РЕДАКТИРОВАТЬ : Основная статистика поддержки для
element.outerHTML
источник
Нет необходимости создавать функцию для него. Просто сделайте это так:
(Кстати, в консоли вашего браузера будет отображаться то, что зарегистрировано. Большинство новейших браузеров, начиная с 2009 года, имеют эту функцию.)
Волшебство это на конце:
Клон означает, что вы на самом деле не беспокоите DOM. Запустите его без него, и вы увидите
p
теги, вставленные до / после всех гиперссылок (в этом примере), что нежелательно. Так что да, пользуйтесь.clone()
.Он работает так, что он берет каждый
a
тег, создает его клон в ОЗУ, оборачиваетp
тегами, получает его родитель (то естьp
тег), а затем получает егоinnerHTML
свойство.РЕДАКТИРОВАТЬ : принял советы и изменил
div
теги наp
теги, потому что он меньше печатает и работает так же.источник
Как насчет
prop('outerHTML')
:?И установить:
Это сработало для меня.
PS : это добавлено в jQuery 1.6 .
источник
Расширить JQuery:
И используйте это так:
$("#myTableRow").outerHTML();
источник
return $('<div>').append(this.clone()).html();
это просто немного более точно.Я согласен с Арпаном (13 декабря 10:59).
Его способ сделать это - НАМНОГО лучший способ сделать это, поскольку вы не используете клон. Метод клонирования занимает очень много времени, если у вас есть дочерние элементы, и никто больше не заботился о том, что IE действительно имеет
outerHTML
атрибут (да, IE действительно имеет НЕКОТОРЫЕ полезные приемы).Но я бы, вероятно, создал его сценарий немного по-другому:
источник
clone()
иtextarea
s мне понадобилось решение без клонирования, и это было точно.outerHTML
где доступно, так как он поддерживается Chrome в дополнение к Internet Explorer.Чтобы быть действительно jQuery-esque, вы можете захотеть
outerHTML()
быть геттером и сеттером, и его поведение должно быть максимально схожимhtml()
:Это позволяет нам передавать аргумент
outerHTML
, который может бытьfunction (index, oldOuterHTML) { }
- где возвращаемое значение станет новым HTML для элемента (еслиfalse
не возвращено).Для получения дополнительной информации см. Документацию jQuery для
html()
.источник
Вы также можете использовать get (Получить элементы DOM, соответствующие объекту jQuery.).
например:
Как метод расширения:
Или
Множественный выбор и возврат внешнего HTML всех найденных элементов.
возвращение:
источник
Чтобы сделать полный плагин jQuery as
.outerHTML
, добавьте следующий скрипт в любой файл js и включите после jQuery в свой заголовок:Это позволит вам не только получить externalHTML одного элемента, но даже получить возврат из Array сразу нескольких элементов! и может использоваться в обоих стандартных стилях jQuery как таковых:
Для нескольких элементов
Примеры фрагментов:
Показать фрагмент кода
источник
Вы также можете просто сделать это таким образом
где id - это идентификатор элемента, который вы ищете
источник
$("#" + id).attr("id")
невероятно излишним. Если у вас уже есть идентификатор в переменной, почему вы используете селектор jquery для извлечения элемента из dom, а затем запрашиваете его атрибут ID?Я использовал решение Джессики (отредактированное Джошем), чтобы получить externalHTML для работы в Firefox. Проблема, однако, в том, что мой код ломался, потому что ее решение обернуло элемент в DIV. Добавление еще одной строки кода решило эту проблему.
Следующий код дает вам externalHTML, оставляя дерево DOM без изменений.
И используйте это так: $ ("# myDiv"). OuterHTML ();
Надеюсь, кто-то найдет это полезным!
источник
Скрипка здесь: http://jsfiddle.net/ezmilhouse/Mv76a/
источник
Если сценарий добавляет новую строку динамически, вы можете использовать это:
.myrow
это имя класса<tr>
. Он создает копию последней строки и вставляет ее как новую последнюю строку. Это также работает в IE7 , в то время как[0].outerHTML
метод не разрешает присваивания в ie7источник
node.cloneNode () вряд ли выглядит как взлом. Вы можете клонировать узел и добавить его к любому желаемому родительскому элементу, а также манипулировать им, манипулируя отдельными свойствами, вместо того, чтобы, например, запускать регулярные выражения на нем или добавлять его в DOM, а затем манипулировать им после слов.
Тем не менее, вы также можете перебирать атрибуты элемента, чтобы создать его представление в виде строки HTML. Кажется вероятным, что именно так будет реализована любая функция externalHTML, если бы jQuery ее добавил.
источник
Я использовал решение Volomike, обновленное Джессикой. Просто добавил проверку, чтобы увидеть, существует ли элемент, и сделал его пустым, если его нет.
Конечно, используйте это как:
источник
Вы можете найти хороший вариант .outerHTML () здесь https://github.com/darlesson/jquery-outerhtml .
В отличие от .html (), который возвращает только HTML-содержимое элемента, эта версия .outerHTML () возвращает выбранный элемент и его HTML-содержимое или заменяет его как метод .replaceWith (), но с той разницей, которая позволяет заменяющему HTML наследоваться цепочка
Примеры также можно увидеть в URL выше.
источник
Обратите внимание, что решение Джоша работает только для одного элемента.
Можно утверждать, что «внешний» HTML действительно имеет смысл, только когда у вас есть один элемент, но есть ситуации, когда имеет смысл взять список элементов HTML и превратить их в разметку.
Расширяя решение Джоша, оно будет обрабатывать несколько элементов:
Изменить: исправлена еще одна проблема с решением Джоша, см. Комментарий выше.
источник
Другое аналогичное решение с добавлением
remove()
временного объекта DOM.источник
Я сделал этот простой тест, где externalHTML - это решение Tokimon (без клона), а outerHTML2 - решение Jessica (клон)
и результат в моем браузере Chromium (Версия 20.0.1132.57 (0)) был
externalHTML: 81
мс externalHTML2: 439 мс
но если мы используем решение Tokimon без встроенной функции externalHTML (которая теперь поддерживается, вероятно, почти во всех браузерах)
мы получили
externalHTML: 594ms
ВнешнийHTML2: 332ms
и в реальных примерах будет больше циклов и элементов, поэтому идеальная комбинация будет
поэтому метод клонирования на самом деле быстрее, чем метод wrap / unwrap
(jquery 1.7.2)
источник
Вот очень оптимизированный внешний плагин externalHTML для jquery: ( http://jsperf.com/outerhtml-vs-jquery-clone-hack/5 => 2 других фрагмента быстрого кода не совместимы с некоторыми браузерами, такими как FF <11)
@ Andy E => Я не согласен с тобой. externalHMTL не нуждается в геттере и сеттере: jQuery уже дает нам «replaceWith» ...
@mindplay => Почему вы присоединяетесь ко всем externalHTML? jquery.html возвращает только HTML-содержимое элемента FIRST.
(Извините, не хватает репутации, чтобы писать комментарии)
источник
Коротко и сладко.
или событие более сладкое с помощью функций стрелок
или вообще без jQuery
или если вам не нравится этот подход, проверьте
источник
Это довольно просто с ванильным JavaScript ...
источник
Это отлично подходит для изменения элементов в dom, но НЕ работает, например, при передаче html-строки в jquery следующим образом:
После некоторых манипуляций я создал функцию, которая позволяет работать с вышеупомянутым, т.е. для строк html:
источник
$.html = el => $("<div>"+el+"</div>").html().trim();
источник
Я столкнулся с этим, когда искал ответ на свою проблему, которая заключалась в том, что я пытался удалить строку таблицы, а затем добавить ее обратно внизу таблицы (поскольку я динамически создавал строки данных, но хотел показать «Добавить новый» Запись 'типа строки внизу).
У меня была та же проблема, в том, что она возвращала innerHtml, поэтому отсутствовали теги TR, которые содержали идентификатор этой строки и означали, что невозможно повторить процедуру.
Ответ, который я нашел, состоял в том, что
remove()
функция jquery на самом деле возвращает удаляемый элемент как объект. Итак, удалить и заново добавить строку было так просто, как это ...Если вы не удаляете объект, но хотите скопировать его в другое место, используйте
clone()
функцию.источник
Плагин jQuery в качестве сокращения, чтобы напрямую получить весь элемент HTML:
И используйте это так:
$(".element").outerHTML();
источник
Где «x» - номер узла, начиная с 0 в качестве первого, должен получить нужный вам узел, если вы пытаетесь получить конкретный. Если у вас есть дочерние узлы, вам действительно нужно поставить ID на тот, который вы хотите, чтобы просто сосредоточиться на этом. Использование этой методологии и отсутствие «х» отлично сработало для меня.
источник
.html()
данным элементом. Это работает, и я хотел бы объяснить, почему это не так.Простое решение
источник
Возможно, я не правильно понимаю ваш вопрос, но он получит html родительского элемента выбранного элемента.
Это то, что вы после?
источник