JQuery html() и самозакрывающиеся теги

При создании самозакрытых элементов с jQuery html() возникает следующая проблема:

$('#someId').html('<li><input type="checkbox" /></li>')

создаст

<li><input type="checkbox"></li>

Он правильно закрывает тег <li>, но не <input>

Кажется, проблема из innerHTML, которая используется в функции html().

Я повсюду искал и нашел решение для этого, но страница больше не доступна, как вы видите: http://dev.jquery.it/ticket/3378 p >

Кто-нибудь знает, как это исправить?

Ответы

Ответ 1

Чтобы уточнить, это допустимо HTML:

<input type="checkbox">

и это действительный XML (включая XHTML):

<input type="checkbox"/>

но это недействительно HTML. При этом большинство браузеров, вероятно, все равно согласятся с ним (но документ не будет проверяться, если это что-то для вас значит).

html() использует innerHTML. В IE и, возможно, в других браузерах это имеет проблемы, поскольку XHTML по-прежнему моделируется как HTML DOM. См. Внутренний IE-HTML DOM по-прежнему не соответствует XHTML.

В принципе, очень мало оснований для использования XHTML. Это кошмар перекрестного браузера. Подробный обзор о том, почему см. XHTML - записывает самозакрывающиеся теги для элементов, которые традиционно не содержат ошибочной практики?, особенно первый ответ.

Ответ 2

В эпоху HTML5 можно утверждать, что <input type="checkbox"> и <input type="checkbox" /> являются одинаково действительными представлениями одного и того же элемента void.

Хотя это верно, причина innerHTML по-прежнему сериализует элементы void без /> двояка:

  • Элемент void является элементом void независимо от того, как вы представляете его в браузере. К моменту, когда браузер построил элемент, его разметка не имеет значения, и что касается DOM, то это элемент флажка input типа. Единственное место, к которому относится элемент "тег", это его свойство tagName и даже если у него есть свой собственный приступ.

  • Нет никакой причины для того, чтобы браузер начал сериализовать элемент void с синтаксисом />, когда сам HTML5, в силу того, что он основан на HTML, а не XML, не требует его. Сделав это только потому, что он одинаково справедлив для использования синтаксиса />, бесполезно нарушает совместимость с устаревшими сайтами для абсолютно нулевого усиления (поскольку наличие /> никак не изменяет значение вывода). Который возвращает нас к cletus, ответив на различие между разметкой HTML и разметкой XHTML.

innerHTML и по расширению jQuery.html() был разработан, чтобы дать вам представление HTML содержимого элемента из DOM. Он не предназначен для того, чтобы дать вам разметку HTML, которую браузер использовал для создания элемента в DOM. Вы не можете "исправить" это, потому что с самого начала ничего не исправить. То, что вам нужно сделать, заключается в том, чтобы не полагаться на элемент innerHTML для чего-либо другого, кроме, возможно, случайного сеанса отладки.

См. также: Nested <p> автозакрытие/открытие тегов