javascript - 使用 html 标签 vs javascript 创建元素

标签 javascript html

我正在尝试掌握 html 和 javascript 并想知道使用 document.createElement(some_tag) 之间是否存在功能差异对比<some tag></some tag> .我可以看到如何使用 javascript 的创建元素可以很容易地在网站的不同页面/部分中一遍又一遍地创建特定元素(而不是复制和粘贴并使代码变得笨重)。但是使用 create element 对内存或其他东西来说是不好的做法/不好吗?

例如,考虑以下代码:

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>

或者它们是否完全相同,第二个只是更容易/更快地输入。

最佳答案

我发现将事物分开可以避免你在路上遇到很多挫折。定义页面上的对象应该放在 HTML 中,为这些元素设置样式和动画应该放在 CSS 中,而使事情正常进行应该放在 javascript 中。当然,这不是一个硬性规定,但按意图将内容分开可以使阅读更容易,也更容易找到您要查找的内容。此外,为了响应哪种方法更快,预组装的 HTML 将比尝试在 js 中动态组装它加载得更快。

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

关于javascript - 使用 html 标签 vs javascript 创建元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42312281/

相关文章:

javascript - 水平网站上的 scrollTop 或 scrollLeft?

javascript - Bxslider 如何将 slider 移动到特定图像(项目)

javascript - 在 DOM 中查找子值的父值

javascript - 如何从特定数组中获取新数组

javascript - 三元运算符的 if 条件不返回 true 或 false

javascript - jQuery wrapAll 带变量的两个元素

html - Angular2 - 将 div 添加到 DOM

javascript - setTimeout() 在 angularjs 中不起作用?

html - 如何使用 javascript 给一个只有 css 的轮播自动播放

javascript - 无法读取路由参数中未定义的属性 'name'