Получить сырой HTML-узел в JQuery

Question

Я использовал $("#parent").html(), чтобы получить внутренний html #parent, но как мне получить html самого родителя?

Вариант использования: я беру входной узел следующим образом:

var field = $('input');

Я хотел бы иметь возможность получить необработанный HTML-код этого узла (<input type='text'>) с чем-то вроде field.html(), но он возвращается пустым. Это возможно?

Answer 1

Или вы можете создать добавить функцию JQuery следующим образом:

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

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

$('input').outerHTML();

или

$('input').outerHTML("new html");

благодаряhttp://yelotofu.com/2008/08/jquery-outerhtml/

Answer 2

Это немного неловко:

var field = $("input"); // assuming there is but 1
var html = field.wrap("<div>").parent().html();
field.unwrap();

html() аналогично innerHTML.Не существует «стандартного» * ​​1006 * метода.Вышеуказанный элемент оборачивает нужный элемент во временный элемент и получает innerHTML его.

Answer 3

Этот вопрос очень старый, но теперь есть простое решение:

const html = $('input').prop('outerHTML');

Пример строкового значения html:

Скрипка с ним:
https://jsfiddle.net/u0a1zkL1/3

И, техника, упомянутая в комментарии Optimae, также работает:

const html = $('input')[0].outerHTML;

Answer 4

Вы можете использовать:

var html = $('#parent')[0];

Это получит узел #parent, а затем вернет код первого возвращенного узла (который в этом случае будет единственным).