Создайте ярлык с помощью jQuery на лету

Мне нужно создать метку и текстовое поле "на лету", а также включить datepicker для текстового поля. Мне нужно что-то вроде этого:

<label for="from">From </label> <input type="text" id="from" name="from" />

Я пробовал что-то подобное в jQuery:

var label = $("<label>").attr('for', "from");   
                    label.html('Date: ' +
                        '<input type="text" id="from name="from" value="">');

                    $(function() {
                        $("#from").datepicker();
                    });

Этот как-то не создает ярлык, а также текстовое поле. Я не уверен, что мне не хватает.

ИЗМЕНИТЬ

Чтобы быть более точным, я использую это в портлетах, и у меня нет тегов тела на странице jsp. Поэтому, когда я вызываю функцию для добавления в тело, она не будет.

Ответы

Ответ 1

Что-то вроде этого будет работать:

//Create the label element
var $label = $("<label>").text('Date:');
//Create the input element
var $input = $('<input type="text">').attr({id: 'from', name: 'from'});

//Insert the input into the label
$input.appendTo($label);
//Insert the label into the DOM - replace body with the required position
$('body').append($label);

//applying datepicker on input
input.datepicker();

jsFiddle Demo

Обратите внимание, что вам не нужно использовать атрибут for на метке, если элемент ввода находится внутри него. Поэтому используйте один из следующих вариантов:

<label><input id="x1"></label>

<label for="x1"></label> <input id="x1">

Ответ 2

Вам нужно будет прикрепить ярлык, который вы создали, к DOM, чтобы показать его:

var label = $("<label>").attr('for', "from");
    label.html('Date: ' +
      '<input type="text" id="from name="from" value="">');

label.appendTo('body');

// set up datepicker
label.find('#from').datepicker();

Ответ 3

Где вы пытаетесь вставить ярлык? Если вы хотите в начале страницы, вы можете сделать что-то вроде этого.

var $label = $("<label>").attr('for', "from");   

$label.html('Date: <input type="text" id="from" name="from" value="">');

$(function() {
    $('body').prepend($label);

    $(':input', $label).datepicker();
});

Ответ 4

1) В конце атрибута ID отсутствует закрывающая цитата.
2) Вы не добавляли сам ярлык.