使用jQuery动态创建标签

Question

我需要动态创建一个标签和文本框，并在文本框中包含日期选择器。我需要像这样的东西：

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

这个代码某种方式上没有创建标签和文本框，我不确定自己漏掉了什么。

编辑

更准确地说，我是在portlet中使用这段代码，jsp页面中没有body标签。所以当我调用将元素追加到body的函数时，它无法成功执行。

- user525146

---

似乎它们从未被插入到DOM中。 - kapa

你将它添加到 DOM 的其他位置了吗？这里的代码创建了对象，但没有将其附加到 DOM 中，因此它不会在浏览器中显示。 - hellslam

Answer 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演示

请注意，如果输入元素在标签内部，则无需在标签上使用for属性。因此，请使用以下其中之一：

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

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

- kapa

---

@user525146，不要使用 body 选择器，可以使用其他任何你想要的选择器。例如，如果你有一个 <div id="inserthere">，就可以使用 $('#inserthere') 而不是 $('body')。 - kapa

我还有一个问题。我的JSP页面是一个Ajax页面，所以每次加载页面时都会创建一个新的日期标签和文本字段... - user525146

@user525146 这很简单。由于 id 在整个文档中必须是唯一的，所以您只需检查是否存在已有的 #from 元素。类似这样 if ($('#from').length == 0) { //运行代码 }。 - kapa

链接失效，无法响应。 - JoshYates1980

@JoshYates1980 那个问题因某种原因被删除了。 - kapa

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

- rjz

Answer 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();
});

- Bryan

---

请注意，在我的答案版本中，我已经更正了“id”拼写错误，并将标签附加到正文中，同时提供了一种轻松更改目标以进行附加的方法 :) - Bryan

Answer 4

1) 在 ID 属性的末尾缺少闭合引号。
2) 你没有将标签本身附加到任何东西上。

- Ilia G