使用 html 标签与 javascript 创建元素

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 中，样式和动画这些元素应该放在你的 CSS 中，让事情做的东西应该放在你的 javascript 中。 当然，这不是一个硬性规定，但按意图将内容分开可以更容易阅读，更容易找到你要找的东西。 此外，为了响应哪种方法更快，预组装的 HTML 加载速度将比尝试在 js 中即时组装它更快。

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

Answer 2

您的页面/浏览器将：

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

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

一般来说，当您必须生成在页面加载后可能会发生变化的内容（例如单击内容、执行内容）或根据加载时存在的情况而有所不同（例如 go get a list of其他地方的东西）。 静态/不变的材料最好保留为 HTML。

Answer 3

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

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

这是一个非常简单的示例，但直接 HTML 的性能会稍高一些，而且对于静态内容，更易于维护。

Answer 4

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

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

使用 html 标签与 javascript 创建元素

问题描述

4 个解决方案

解决方案1
2 2017-02-18 07:21:07

解决方案2
2 2017-02-18 07:32:42

解决方案3
0 2017-02-18 07:18:00

解决方案4
0 2017-02-18 08:07:26

使用 html 标签与 javascript 创建元素

问题描述

4 个解决方案

解决方案1 2 2017-02-18 07:21:07

解决方案2 2 2017-02-18 07:32:42

解决方案3 0 2017-02-18 07:18:00

解决方案4 0 2017-02-18 08:07:26

解决方案1
2 2017-02-18 07:21:07

解决方案2
2 2017-02-18 07:32:42

解决方案3
0 2017-02-18 07:18:00

解决方案4
0 2017-02-18 08:07:26