当我使用 jQuery 作为字符串创建嵌套 DOM 元素时会发生什么？

发布于 2024-12-06 12:31:22 字数 495 浏览 0 评论 0原文

当我使用以下内容时会发生什么，有什么语义差异吗？

方法一：

var task = $('<li class="task"><header><h1></h1></header></li>')        
$('#backlog-tasks').append(task);

方法二：

var task = $('<li>').attr('class','task');
task.append('<header>');
.....

第二个问题：是否有一种比上述方法更受您青睐的方法？

示例

http://jsfiddle.net/Zwedh/2/

原文

What happens when I use the following, and is there any semantic difference?

Method one:

var task = $('<li class="task"><header><h1></h1></header></li>')        
$('#backlog-tasks').append(task);

Method two:

var task = $('<li>').attr('class','task');
task.append('<header>');
.....

A secondary question: Is there an approach which you favour over the above?

Example

http://jsfiddle.net/Zwedh/2/

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

提笔书几行 2024-12-13 12:31:22

正如 jQuery 文档中所述，方法 1 由浏览器解析，而方法 2 则不然。这在散文中很难找到，

...jQuery 使用浏览器的.innerHTML属性来解析传递的HTML并将其插入到当前文档中。在此过程中，某些浏览器会过滤掉某些元素，例如、</code> 或 <code><head></code> 元素。因此，<strong>插入的元素可能无法代表传递的原始字符串</strong>。</p><br />

但它肯定是存在的。（强调我的。）

我倾向于使用方法 2，原因如下：

不依赖于可能特定于浏览器的东西。（见上文。）]
您不必担心引用引号 - jQuery 会为您做到这一点。
如果您需要用户定义属性的内容怎么办？

更多关于最后一个的内容。假设您需要根据用户输入设置某些元素的 style （可能难以置信，但我想不出更好的例子）。

方法 1

$("<p style='" + input + "'>")

现在考虑一下 ' onclick="$.ajax(/* some bad parameters */)" data-dummy=' 的输入。（或者我相信你能想到更糟糕的情况。）这不是有史以来最令人向往的事情。

方法2

$("<p>").attr("style", input)

好多了。

As noted in the jQuery documentation, method 1 is parsed by the browser, while method 2 isn't. This is rather hard to find in the prose,

...jQuery uses the browser's .innerHTML property to parse the passed HTML and insert it into the current document. During this process, some browsers filter out certain elements such as <html>, <title>, or <head> elements. As a result, the elements inserted may not be representative of the original string passed.

but it definitely is there. (Emphasis mine.)

I tend to use method 2, for several reasons:

Doesn't rely on possibly-browser-specific stuff. (See above.)]
You don't have to worry about quoting quotes - jQuery does it for you.
What if you need an attribute's contents to be user-defined?

More on that last one. Say you need to set the style of some element according to user input (probably implausible, but I couldn't think of a better example).

Method 1

$("<p style='" + input + "'>")

Now think about an input of ' onclick="$.ajax(/* some evil parameters */)" data-dummy='. (Or I'm sure you can think of worse.) Not the most desirable thing ever.