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

时间:2009-04-17 10:22:50

标签: jquery dom

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

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

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

6 个答案:

答案 0 :(得分:65)

我先把它放在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 context在其下应用CSS选择器。这使得它不会将ID应用于DOM树中的其他元素。

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

你可能不会在你的DOM树中放置裸LI用于你的“真实”实现,但UL必须能够实现这一点。叹息。

实施例: http://jsbin.com/iceqo

顺便说一下,您可能也对microtemplating感兴趣。

答案 1 :(得分:25)

试试这个:

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,它会使以后更容易更改。

答案 2 :(得分:15)

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

这个怎么样?

答案 3 :(得分:3)

首先将模板制作成jQuery对象:

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

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

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

请注意,将li直接添加到DOM是没有意义的,因为li应该始终是ul或ol的子元素。最好不要让jQuery解析原始HTML。而是创建一个li,设置其属性。创建一个div并设置它的属性。将div插入li中,然后将li附加到DOM。

答案 4 :(得分:3)

这是一个班轮:

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

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

答案 5 :(得分:2)

您的示例失败有三个原因。

  1. 原始的'template'变量不是jQuery / DOM对象,无法解析,它是一个字符串。通过将其包装在$()中使其成为jQuery对象,例如:template = $(template)

  2. 一旦'template'变量是一个jQuery对象,你需要意识到&lt; li&gt;是根对象。因此,您无法搜索LI根节点并获得任何结果。只需将ID应用于jQuery对象。

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

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