如何创建DOM节点作为对象？

Question

我想创建一个DOM节点,设置'id'属性然后将其附加到'body'.以下似乎不起作用,因为jQuery没有看到我的模板作为对象:

var template = "<li><div class='bar'>bla</div></li>";
template.find('li').attr('id','1234');
$(body).append(template);

我如何告诉jQuery将其视为一个对象,以便find()对它起作用？

Answer 1

我先把它放在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     

放置e(返回元素)给出了jQuery 上下文,在该上下文中应用CSS选择器.这使得它不会将ID应用于DOM树中的其他元素.

问题似乎是您没有使用UL.如果你在DOM树中放置一个裸体,你就会遇到问题.我认为它可以处理/解决这个问题,但事实并非如此.

你可能没有将裸LI放在你的DOM树中用于"真正的"实现,但UL必须能够实现这一点.叹.

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

顺便说一句,您可能也对微模仿感兴趣.

Answer 2

试试这个:

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

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

显然,将李直接附加到身体上是没有意义的.基本上,诀窍是用$('你的html here')构造DOM elementr树.我建议使用CSS修饰符(.text(),. addClass()等),而不是让jquery解析原始HTML,它会使以后更容易更改.

Answer 3

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

那这个呢？