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

Question

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

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

создаст

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

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

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

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

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

Answer 1

Чтобы уточнить, это действительный HTML:

<input type="checkbox">

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

<input type="checkbox"/>

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

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

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

Answer 2

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

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

• Пустой элемент - это пустой элемент независимо от того, как вы представляете его в браузере. К тому времени, когда браузер сконструировал элемент, его разметка уже не имеет значения, и что касается DOM, то это элемент input типа checkbox. Единственное место, к которому относится «тег» элемента, - это его свойство tagName, а даже имеет собственную причуду .

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

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

См. Также: Вложенный

тег автоматического закрытия / открытия тега