javascript - 无法将 ID 设置为在 JQUERY 中动态创建的标签

Question

我在 jquery 中动态创建了一个标签。我需要为该标签分配某些样式。在这里，我尝试为该标签分配一个唯一 ID 并应用样式。但它不起作用。

我的代码是；

Javascript

var lbl = $("<label>").text('Welcome');
lbl.id = "test";
$("#sec").append(lbl);

CSS

#test
{
  color:red;
  font-size:20px;
}

如何将 ID 分配给动态标签？

Answer 1

您需要使用lbl.prop("id","test")，因为您已lbl作为 jQuery 元素而不是 javascript/DOM 元素启动，因此它没有该id属性。

Answer 2

需要使用

var lbl = $("<label>", {
   id: 'test'
}).text('Welcome');

$("#sec").append(lbl);

或使用 attr

var lbl = $("<label>").text('Welcome');
lbl.attr('id', "test");
$("#sec").append(lbl);

Answer 3

动态添加一些东西并不难。

请参阅下面的代码：

HTML：

<label id ='lbl'>This is a label </label>
<button id ='btn'>Click</button>

JS：

$("#btn").click(function(){
    $("#lbl").css("color","red");
    $("#lbl").css("fontSize","20px");
});

这里的工作解决方案：http: //jsfiddle.net/baEWb/

或者

如果您只想使用label而不是任何标签 id 或类，那么：

$("#btn").click(function(){
    $("label").css("color","red");
    $("label").css("fontSize","20px");
});

小提琴：http: //jsfiddle.net/baEWb/1/

Answer 4

使用以下代码

var lbl = $("<label id='test'>").text('Welcome');
$("#sec").append(lbl);

将“id ='test'”放在标签标签中