3

非常简单的问题，我找不到答案，也许是因为它不是问题，但我想知道使用 Javascript 创建 HTML 对象或使用字符串构建元素之间是否有区别。例如，将 JS 中的任何 HTML 元素声明为 JS 对象或字符串并让浏览器/库/等解析它们是一种更好的做法吗？例如：

jQuery('<div />', {'class': 'example'});

对比

jQuery('<div class="example></div>');

（仅以 jQuery 为例，但同样的问题也适用于 vanilla JS。）

这对我来说似乎不是问题，但我不是 JS 专家，我想确保我做对了。提前致谢！

4

3 回答 3

3

他们都是“正确的”。两者都在不同的时间用于不同的目的。

例如，就页面速度而言，如今只需执行以下操作会更快：

document.body.innerHTML = "<header>....big string o' html text</footer>";

浏览器会立即将其吐出。

为了安全起见，在处理用户输入时，构建元素，将它们附加到 adocumentFragment然后将它们附加到 DOM（或用新版本替换 DOM 节点，或其他）会更安全。

考虑：

var userPost = "My name is Bob.<script src=\"//bad-place.com/awful-things.js\"></script>",
    paragraph = "<p>" + userPost + "</p>";

commentList.innerHTML += paragraph;

相对：

var userPost = "My name is Bob.<script src=\"//bad-place.com/awful-things.js\"></script>",
    paragraph = document.createElement("p");

    paragraph.appendChild( document.createTextNode(userPost) );
    commentList.appendChild(paragraph);

一个做坏事，一个不做。

当然，您不必创建textNodes，您可以使用innerTextortextContent或其他任何东西（浏览器将自行创建文本节点）。

但考虑您共享的内容和方式始终很重要。

如果它来自您信任的地方以外的任何地方（应该几乎无处可去，除非您提供静态页面，在这种情况下，您为什么要构建 html？），那么您应该牢记注入 - 只有东西你想被注射应该是。

于 2012-08-02T17:27:46.533 回答
2

根据您的特定情况，任何一种都可能更可取——即，如果所有内容都是硬编码的，那么选项 2 可能会更好，正如@camus 所说。

但是，第一个选项的一个限制是，

$("<div data-foo='X' />", { 'class': 'example' });

不会工作。该重载需要一个裸标签作为第一个参数，根本没有属性。

这是在这里报告的

于 2012-08-02T17:23:00.600 回答
0

1/ 如果您的属性依赖于调用 $ 函数之前设置的变量，则更好，不必连接字符串和变量。除了这个事实，因为你可以两者都做，而且它只是一些其他人编写的 js 代码，而不是在浏览器中硬编码的 C++ DOM API...

于 2012-08-02T17:22:39.167 回答