Question

我正在努力掌握html和javascript，并想知道使用document.createElement(some_tag)与<some tag></some tag>之间是否存在功能差异。我可以看到如何使用javascript的create元素可以轻松地在网站的不同页面/部分中反复创建特定元素（而不是复制和粘贴并使代码变得笨重）。但对于内存或使用创建元素的东西是不好的做法/坏。

例如，请考虑以下代码：

function createhtml() {
  var li1 = document.createElement("li");
  var text1 = document.createTextNode("First List Item");
  li1.appendChild(text1);
  var ul1 = document.createElement("ul");
  ul1.appendChild(li1);
  document.body.appendChild(ul1);

}

<body onload="createhtml()">
</body>

这样做更好，还是干脆：

<ul>
  <li>First List Item </li>
</ul>

或者它们两者完全相同，第二个更容易/更快地输入。

Answer 1

对于输入的HTML，将加载页面，您的列表将可见。

对于JavaScript版本，页面将加载，您的脚本将被解析并运行，然后列表将可见。

这是一个非常简单的例子，但是直接的HTML会稍微提高性能，对于静态内容来说，更易于维护。

Answer 2

我发现将东西分开可以为你节省很多挫折感。定义页面上的对象应该放在你的HTML中，样式和动画这些元素应该放在你的CSS中并且做些事情应该放在你的javascript中。当然，这不是一个严格而快速的规则，但保持事物分离意味着更容易阅读，更容易找到你想要的东西。另外，为了响应哪种方法更快，预组装HTML的加载速度比尝试在动态js中组装它更快。

TLDR;尽可能在HTML中创建元素。

Answer 3

您的页面/浏览器将：

绘制静态HTML
去获取JavaScript并运行它
将新元素重新绘制到页面中

在您的示例中，这是一个用户永远不会注意到的微不足道的事情，但在较大的页面上它可能会导致问题。 JavaScript方法在时间和处理效率方面效率也较低。

一般来说，当你必须生成可能在页面加载后改变的东西（例如点击东西，做东西），或者根据加载时存在的环境（例如，去获取）时，你会想要使用JavaScript来自其他地方的东西清单）。静态/不变的材料最好是HTML格式。

Answer 4

对于你的例子，如果你知道之前使用静态html标签的元素数量是更好的选择，因为它需要时间和内存附加到正文。

在其他情况下，如果您不知道将多少元素附加到正文，那么您必须使用dom。您可以在开发人员工具“F12”时间轴中看到您的元素可以看到的性能和内存。

使用html标签与javascript创建元素

4 个答案: