В чем разница между этими двумя утверждениями при попытке добавить переключатель к тегу li с помощью JQuery?
var inputText = $("<input />", {"type":"radio", "name":"choices", "value":choices[i], "text":choices[i]});'
var inputText =$("<li />").html( '<input type="radio" name="choices" value="'+choices[i]+'">' + choices[i] + '</input>');
Первый не отображает текст рядом с переключателем на странице HTML, хотя при проверке элемента код HTML верен, а последний отображается правильно. Я предпочитаю прежний синтаксис, потому что его чище, но я не могу заставить его работать.
Недопустимо, чтобы элемент input
содержал текст. Если вы посмотрите на спецификацию, вы увидите:
Начальный тег: обязательно, Конечный тег: запрещено
В первом примере jquery помещает текст внутри входного тега, который браузер не отображает, поскольку он недействителен. Что-то вроде этого:
<input>text here</input>
Во втором примере, хотя вы пытались сделать его недействительным, он преобразуется в это:
<input>
text here
Если вы проверите его, вы увидите, что текст находится вне ввода и, следовательно, отображается.
Действительно, оба подхода ошибочны, хотя второй технически работает, конечный тег должен быть остановлен:
var inputText =$("<li />").html('<input type="radio" name="choices" value="'+choices[i]+'">' + choices[i]);
С Джеймсом. Кроме того: если вы хотите сохранить синтаксис в первом примере, я думаю, вы могли бы использовать:
$('<label />').append($("<input />", {"type":"radio", "name":"choices", "value":"foo" }).after('foo'))
Который также обертывает ваш ввод в ярком элементе label
который позволяет также нажимать на текстовую метку.