我想创建一个 DOM 节点，设置 'id' 属性，然后将其附加到 'body'。以下似乎不起作用，因为 jQuery 没有将我的模板视为对象：
var template = "<li><div class='bar'>bla</div></li>";
template.find('li').attr('id','1234');
$(body).append(template);
我如何告诉 jQuery 将其视为对象以便 find() 对其进行处理？
【问题讨论】：
liunderneath li，但是只有div 和文本bla。尝试这样的事情来了解会发生什么var template=$("<div><li><div>bla</div></li></div>")
我会先把它放在 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 树中放置一个裸 li，你就会遇到问题。我认为它可以处理/解决这个问题，但它不能。
您可能不会将裸 LI 放在您的 DOM 树中以实现“真正的”实现，但 UL 是实现此目的所必需的。叹息。
对了，你可能也对microtemplating感兴趣。
【讨论】：
试试这个：
var div = $('<div></div>').addClass('bar').text('bla');
var li = $('<li></li>').attr('id', '1234');
li.append(div);
$('body').append(li);
显然，直接将 li 附加到正文是没有意义的。基本上，诀窍是使用 $('your html here') 构造 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 直接添加到 DOM 完全没有意义，因为 li 应该始终是 ul 或 ol 的子级。另外最好不要让 jQuery 解析原始 HTML。而是创建一个li，设置它的属性。创建一个 div 并设置它的属性。将 div 插入到 li 中，然后将 li 附加到 DOM。
【讨论】：
这是一个班轮：
$("<li><div class='bar'>bla</div></li>").find("li").attr("id","1234").end().appendTo("body")
但我想知道您为什么要在稍后阶段添加“id”属性而不是直接在模板中注入它。
【讨论】：
您的示例失败的三个原因。
原始的“模板”变量不是 jQuery/DOM 对象，无法解析，它是一个字符串。通过将其包裹在 $() 中使其成为 jQuery 对象，例如：template = $(template)
一旦 'template' 变量是一个 jQuery 对象，您需要意识到
当您将 ID 分配给 HTML 元素时，它不能以任何 HTML5 之前的 HTML 版本的数字字符开头。它必须以字母字符开头。对于 HTML5，这可以是任何非空白字符。详情参考：What are valid values for the id attribute in HTML?
PS：示例代码的最后一个问题是 LI 不能应用于 BODY。根据 HTML 要求，它必须始终包含在一个列表中，即 UL 或 OL。
【讨论】：