jQuery 如何将 DOM 节点创建为对象？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/759887/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create a DOM node as an object?
提问by bart
I would like to create a DOM node, set the 'id' attribute and then append it to 'body'. The following seems not to work because jQuery doesn't see my template as an object:
我想创建一个 DOM 节点，设置 'id' 属性，然后将其附加到 'body'。以下似乎不起作用，因为 jQuery 没有将我的模板视为对象：
var template = "<li><div class='bar'>bla</div></li>";
template.find('li').attr('id','1234');
$(body).append(template);
How can I tell jQuery to treat this as an object so find() works on it?
我如何告诉 jQuery 将它视为一个对象，以便 find() 对其进行处理？
回答by cgp
I'd put it in the DOM first. I'm not sure why my first example failed. That's really weird.
我会先把它放在 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
Putting e (the returns elements) gives jQuery contextunder which to apply the CSS selector. This keeps it from applying the ID to other elements in the DOM tree.
放置 e（返回元素）给出了应用 CSS 选择器的jQuery上下文。这可以防止它将 ID 应用到 DOM 树中的其他元素。
The issue appears to be that you aren't using the UL. If you put a naked li in the DOM tree, you're going to have issues. I thought it could handle/workaround this, but it can't.
问题似乎是您没有使用 UL。如果你在 DOM 树中放置一个裸 li，你会遇到问题。我认为它可以处理/解决这个问题，但它不能。
You may not be putting naked LI's in your DOM tree for your "real" implementation, but the UL's are necessary for this to work. Sigh.
您可能不会将裸 LI 放入 DOM 树中以用于“真实”实现，但 UL 是使其工作所必需的。叹。
Example: http://jsbin.com/iceqo
By the way, you may also be interested in microtemplating.
顺便说一下，您可能也对微模板感兴趣。
回答by Tamas Czinege
Try this:
尝试这个：
var div = $('<div></div>').addClass('bar').text('bla');
var li = $('<li></li>').attr('id', '1234');
li.append(div);
$('body').append(li);
Obviously, it doesn't make sense to append a li to the body directly. Basically, the trick is to construct the DOM elementr tree with $('your html here'). I suggest to use CSS modifiers (.text(), .addClass() etc) as opposed to making jquery parse raw HTML, it will make it much easier to change things later.
显然，直接在 body 上附加一个 li 是没有意义的。基本上，诀窍是用 $('your html here') 构造 DOM elementr 树。我建议使用 CSS 修饰符（.text()、.addClass() 等），而不是让 jquery 解析原始 HTML，这将使以后更改内容变得更加容易。
回答by irio
var template = $( "<li>", { id: "1234", html:
$( "<div>", { class: "bar", text: "bla" } )
});
$('body').append(template);
What about this?
那这个呢？
回答by Pim Jager
First make your template into a jQuery object:
首先让你的模板变成一个 jQuery 对象：
var template = $("<li><div class='bar'>bla</div></li>");
Then set the attributes and append it to the DOM.
然后设置属性并将其附加到 DOM。
template.find('li').attr('id','1234');
$(document.body).append(template);
Note that it however makes no sense at all to add a li directly to the DOM since li should always be children of ul or ol. Also it is better to not make jQuery parse raw HTML. Instead create a li, set its attributes. Create a div and set it's attributes. Insert the div into the li and then append the li to the DOM.
但是请注意，将 li 直接添加到 DOM 完全没有意义，因为 li 应该始终是 ul 或 ol 的孩子。另外最好不要让 jQuery 解析原始 HTML。而是创建一个 li，设置其属性。创建一个 div 并设置它的属性。将 div 插入 li，然后将 li 附加到 DOM。
回答by gizmo
And here is the one liner:
这是一个班轮：
$("<li><div class='bar'>bla</div></li>").find("li").attr("id","1234").end().appendTo("body")
But I'm wondering why you would like to add the "id" attribute at a later stage rather than injecting it directly in the template.
但我想知道您为什么要在稍后阶段添加“id”属性而不是直接将其注入模板中。
回答by JoeFlash
There are three reasons why your example fails.
您的示例失败的原因有三个。
The original 'template' variable is not a jQuery/DOM object and cannot be parsed, it is a string. Make it a jQuery object by wrapping it in $(), such as: template = $(template)
Once the 'template' variable is a jQuery object you need to realize that <li> is the root object. Therefore you cannot search for the LI root node and get any results. Simply apply the ID to the jQuery object.
When you assign an ID to an HTML element it cannot begin with a number character with any HTML version before HTML5. It must begin with an alphabetic character. With HTML5 this can be any non-whitespace character. For details refer to: What are valid values for the id attribute in HTML?
原始的“模板”变量不是 jQuery/DOM 对象并且无法解析，它是一个字符串。将其包裹在 $() 中使其成为 jQuery 对象，例如：template = $(template)
一旦 'template' 变量是一个 jQuery 对象，您需要意识到 <li> 是根对象。因此，您无法搜索 LI 根节点并获得任何结果。只需将 ID 应用到 jQuery 对象。
为 HTML 元素分配 ID 时，对于 HTML5 之前的任何 HTML 版本，它不能以数字字符开头。它必须以字母字符开头。在 HTML5 中，这可以是任何非空白字符。有关详细信息，请参阅：HTML 中 id 属性的有效值是什么？
PS: A final issue with the sample code is an LI cannot be applied to the BODY. According to HTML requirements it must always be contained within a list, i.e. UL or OL.
PS：示例代码的最后一个问题是 LI 不能应用于 BODY。根据 HTML 要求，它必须始终包含在列表中，即 UL 或 OL。
