Fatal编程技术网
  • javascript/
  • Javascript添加元素的良好实践

Javascript添加元素的良好实践

javascript dom

Javascript添加元素的良好实践,javascript,dom,append,Javascript,Dom,Append,我有一个由“parent”标识的空div。我想在里面放一个p元素。有两种方法： 第一种方法： parent.innerHTML = ""; parent.innerHTML = "<p>My dummy text</p>"; 当涉及到良好实践时，这两种方法之间有区别吗 谢谢 第一个选项可以删除您在DOM的该页面上可能拥有的任何事件侦听器 而第二种选择则不会 最好使用选项2。我看到的唯一区别是使用输入时。有些浏览器无法识别新的输入被添加到表单中，然后在提交时不包含这些输入

我有一个由“parent”标识的空div。我想在里面放一个p元素。有两种方法：

第一种方法：

parent.innerHTML = "";
parent.innerHTML = "<p>My dummy text</p>";
当涉及到良好实践时，这两种方法之间有区别吗

谢谢

第一个选项可以删除您在DOM的该页面上可能拥有的任何事件侦听器
而第二种选择则不会

最好使用选项2。

我看到的唯一区别是使用输入时。有些浏览器无法识别新的输入被添加到表单中，然后在提交时不包含这些输入

使用appendChild时，不会出现此问题。因此，正确地操作DOM和追加是一个很好的实践

如果你认为这是太多的工作，创建每个元素并追加它，你可以考虑使用一些框架来加快速度。例如，jQuery允许您使用

$（parent）.html（“我的虚拟文本在这里
”）
并自动为您创建节点。

来自：

“浏览器通过将HTML的大字符串塞进innerHTML属性而不是通过一堆API调用来更好地构建DOM结构。”

我想他们知道他们在说什么

因此，除了Rob Mayoff在评论中提到的不追加之外，使用innerHTML可能更快，特别是对于不太常见的情况。

当您打算添加纯文本（无事件侦听器）时，没有复杂的属性值，
innerHTML
通常是一个不错的选择

如果文本不包含任何HTML标记，
textContent
或
innerText
（IE）是更好的选择，因为设置这些属性不会导致字符串被解析为HTML

成吨的
document.createElement
和
appendChild
通常比设置
innerHTML
属性慢，尤其是在比较1000x append-to-body和1x
innerHTML
时

当您想要扩展内容未知的元素（可能包含事件侦听器或用户修改的输入元素）时，建议使用
appendChild
。

这里有一些区别：

坏的

  • 这不是一个标准。这是微软引进的一项专有财产（以及不太受欢迎的outerHTML），其他浏览器制造商也采用了这项财产
  • 因为它不是一个标准，所以它不应该在xhtml文档应该使用的application/xhtml+XMLMIME类型下工作。（Firefox 1.5出于某种原因允许了它，从而改变了这一点）
  • InnerHTML是一个字符串。DOM不是字符串，它是一个层次对象结构
  • 在很多情况下，它会导致一些几乎难以辨认的代码，到处都是转义引号和加号，将数据附加到字符串中
好

  • 它比DOM方法快。很多

  • 它没有DOM方法那么冗长

  • 它允许您获取任意标记块并将其放入文档中，而无需解析它们
      • 如果不小心，第一种方法可能会引入XSS漏洞。在示例中使用常数字符串使用它是安全的，但请考虑以下内容：

      parent.innerHtml = "<p>" + document.getElementById('userInput').value + "</p>";

      parent.innerHtml=“”+document.getElementById（'userInput'）.value+”
      ”；
      您刚刚将用户输入直接注入到DOM中。如果该输入包含一个脚本标记，那么您已经被XSS删除了。这是一个精心设计的示例，但您可以想象，您可能会意外地从服务器端的未扫描用户输入生成一个字符串，并将其写入DOM。

      。innerHTML
      是一个魔鬼。我们不使用它

      我们之所以使用DOM方法，是因为我们不应该使用内嵌的JavaScript片段

      .innerHTML
      的唯一有效用例是跨浏览器遵从性攻击和模板引擎

      如果您没有执行上述任一操作，那么您应该使用DOM4。

      设置innerHTML将替换现有内容。它没有附加。这两个代码段有不同的效果。很抱歉。我编辑了代码。您的编辑没有改变第一个代码段的工作方式。它不比DOM方法快。这是一个神话。
      innerHTML
      现在是一个标准。它在HTML5中：为什么要附加数千次：\。您将附加到一个文档片段，然后再附加一次文档片段。这根本不是真的。这一点差别很小，特别是对于IE来说，我们中的一些人仍然需要支持它，但在其他浏览器中，在某种程度上也是如此。“加快速度的框架”。不。jQuery非常慢，如果他关心性能，他会避免jQuery如果问题在你发布答案时完好无损，你的错误关于
      1st选项可以删除任何事件侦听器
      你和我已经私下讨论过这一点，但尽管我同情大家的看法，基于可读性，我不同意你在这方面的绝对立场。对于简单的情况，我更喜欢
      el.innerHTML=“Cheese很棒”
      ，而不是三个
      appendChild（）
      s、两个
      document.createElement（）
      s和一个
      document.createTextNode（）
      @TimDown的等价物：\你不会提倡
      。你的例子也是人为的。我想不出有哪种真实的用例需要javascript中类似的代码。我认为在javascript中可以证明内联html正确，但不能证明模板引擎正确的情况非常罕见。如前所述，为您提供
      .innerHTML
      的模板引擎非常酷。根据我们的讨论，我提出了浏览器黑客和模板制作的例外。这是好的观点。除了快速原型或调试之外，我想不出上次使用
      innerHTML的时间，所以我可能真的同意你的看法。

      parent.innerHtml = "<p>" + document.getElementById('userInput').value + "</p>";