Question

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

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

VS

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

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

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

Answer 1

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

例如，就页面速度而言，现在只需执行以下操作即可：

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

浏览器会立即吐出来。

为了安全起见，在处理用户输入时，构建元素更安全，将它们附加到documentFragment然后将它们附加到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，您可以使用innerText或textContent或其他任何内容（浏览器将自行创建文本节点）。

但是考虑你分享的内容和方式总是很重要。

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

Answer 2

根据你的具体情况，两者都可能更好 - 也就是说，如果一切都是硬编码的，那么选项2可能会更好，就像@camus所说的那样。

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

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

将不工作。该重载期望裸标记作为第一个参数，根本没有属性。

据报道here

Answer 3

如果你的attribubes在调用$函数之前依赖于设置的变量，那么

1 /会更好，不必连接字符串和变量。除了这个事实，既然你可以做到这两点，而且只是其他人写的一些js代码，而不是浏览器中硬编码的C ++ DOM API ......

Javascript创建HTML对象与创建HTML字符串

3 个答案: