动态使用jQuery创建标签

动态使用jQuery创建标签,jquery,forms,jquery-ui,jquery-ui-datepicker,dom-manipulation,Jquery,Forms,Jquery Ui,Jquery Ui Datepicker,Dom Manipulation,我需要动态创建一个标签和文本字段,还需要为文本字段添加日期选择器。我需要这样的东西: <label for="from">From </label> <input type="text" id="from" name="from" /> 来自 我在jQuery中尝试过类似的方法: var label = $("<label>").attr('for', "from"); label.html('Da

我需要动态创建一个标签和文本字段,还需要为文本字段添加日期选择器。我需要这样的东西:

<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();
                    }); 
var label=$(“”).attr('for','from');
html('Date:'+

“您需要将已创建的标签附加到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();
var label=$(“”).attr('for','from');
html('Date:'+

“您要将标签插入何处?如果您想将其放在页面的开头,可以这样做

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

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

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

    $(':input', $label).datepicker();
});
var$label=$(“”).attr('for','from');
$label.html('Date:');
$(函数(){
$('body')。前置($label);
$(':input',$label).datepicker();
});
1)ID属性末尾缺少结束引号。

2) 您没有将标签本身附加到任何内容上。

类似的操作可以:

//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();

似乎它们从未插入到DOM中。您是否在其他地方将其添加到DOM中?这里的代码创建了对象,但没有将其附加到dom,因此它不会显示在浏览器中。我实际上在Portlet中使用它,Portlet中没有body标记。它只是一个jsppage@user525146不要使用
正文
,只需使用您想要的任何其他选择器即可。例如,如果您有一个
,请使用
$('inserthere')
而不是
$('body')
。我还有一个问题,我的jsp页面是一个ajax页面,因此每次加载页面时都会创建一个新的日期标签和文本字段。@user525146这很简单。由于
id
s在整个文档中必须是唯一的,因此您只需检查已有的
#from
元素。类似于
if($('#from').length==0){//run code}
。它工作起来很有魅力。非常感谢,我还有一个问题,您是否使用jquery datatables插件?我正试图通过创建一个功能插件将datepicker合并到datatables的sDom元素中。请注意,在我的答案版本中,我已经更正了“id”拼写错误,并且还将标签附加到了正文中,同时提供了一种轻松更改要附加到的目标的方法:)
<label><input id="x1"></label>

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