如何创build一个DOM节点作为一个对象？

我想创build一个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 上下文下应用CSSselect器。 这使它不能将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); 

显然，直接向身体追加li是没有意义的。 基本上，诀窍是用$（'你的html在这里'）构造DOM elementr树。 我build议使用CSS修饰符（.text（），.addClass（）等），而不是使jqueryparsing原始HTML，这将使以后更容易。

Answer 3

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

那这个呢？

Answer 4

首先让你的模板成为一个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的子项。 另外最好不要让jQueryparsing原始HTML。 而是创build一个li，设置它的属性。 创build一个div并设置它的属性。 将div插入到li中，然后将li添加到DOM中。

Answer 5

这里是一个class轮：

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

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

Answer 6

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

1. 原来的“模板”variables不是一个jQuery / DOM对象，不能被parsing，它是一个string。 通过将它包装在$（）中，使其成为一个jQuery对象，例如：template = $（template）

2. 一旦'模板'variables是一个jQuery对象，你需要认识到<li>是根对象。 因此，您不能searchLI根节点并获得任何结果。 只需将该ID应用于jQuery对象。

3. 当您为HTML元素分配ID时，它不能以HTML5之前的任何HTML版本开头。 它必须以字母字符开始。 使用HTML5，这可以是任何非空白字符。 有关详细信息，请参阅： HTML中的id属性的有效值是什么？

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