jqueryformsjquery-uijquery-ui-datepickerdom-manipulation

Create a label using jQuery on the fly


I need to create a label and text field on the fly and also include datepicker for the textfield. I need something like this:

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

I have tried something like this in jQuery:

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

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

This one somehow doesn't create the label and also the text field. I am not sure what I am missing.

EDIT

To be more precise, I am using this in the portlets and I don't have body tags in the jsp page. So when I call the function to append to body it won't.


Solution

  • Something like this would work:

    //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

    Please note that you don't have to use the for attribute on the label if the input element is inside it. So use one of these:

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