如何将DOM节点创建为对象?

我会先把它放在DOM中。我不知道为什么我的第一个例子失败了。这真的很奇怪。

var e = $("<ul><li><div class='bar'>bla</div></li></ul>");
$('li', e).attr('id','a1234');  // set the attribute 
$('body').append(e); // put it into the DOM     

context 在其下应用CSS选择器。这可以防止它将ID应用于DOM树中的其他元素。

问题似乎是您没有使用UL。如果你在DOM树中放置一个裸li,你会遇到问题。我以为它可以处理/解决这个问题,但它不能。

对于“真正的”实现,您可能不会将裸LI放在DOM树中,但UL是实现此功能所必需的。唉。

例子: http://jsbin.com/iceqo

microtemplating .

试试这个:

var div = $('<div></div>').addClass('bar').text('bla');
var li = $('<li></li>').attr('id', '1234');
li.append(div);

$('body').append(li);

显然,将li直接附加到body是没有意义的。基本上,诀窍是用$(这里是你的html)构建DOM元素树。我建议使用CSS修饰符(.text()、.addClass()等),而不是让jquery解析原始HTML,这将使以后更容易更改内容。

var template = $( "<li>", { id: "1234", html:
  $( "<div>", { class: "bar", text: "bla" } )
});
$('body').append(template);

这个怎么样?

首先把你的模板变成一个jQuery对象:

 var template = $("<li><div class='bar'>bla</div></li>");

然后设置属性并将其附加到DOM。

 template.find('li').attr('id','1234');
 $(document.body).append(template);

下面是一句话:

$("<li><div class='bar'>bla</div></li>").find("li").attr("id","1234").end().appendTo("body")

但我想知道为什么你想在稍后阶段添加“id”属性,而不是直接将其注入模板中。

你的例子失败有三个原因。

3. 当您为HTML元素分配ID时,它不能以HTML5之前的任何HTML版本的数字字符开头。它必须以字母字符开头。在HTML5中,这可以是任何非空白字符。有关详细信息,请参阅: What are valid values for the id attribute in HTML?

PS:示例代码的最后一个问题是LI不能应用于BODY。根据HTML要求,它必须始终包含在列表中,即UL或OL。