似乎有经验的 Web 开发人员document.write()在编写动态 HTML 时不喜欢在 JavaScript 中使用。
为什么是这样？什么是正确的方法是什么？
使用 Javascript 编写 HTML 的正确方法是什么？
IT技术
javascript
html
dynamic
code-generation
document.write
2021-02-12 07:11:57
6个回答
document.write()仅在最初解析页面并创建 DOM 时才有效。一旦浏览器到达结束</body>标记并且 DOM 准备就绪，您就不document.write()能再使用了。
我不会说使用document.write()正确或不正确，这取决于您的情况。在某些情况下，您只需要document.write()完成任务即可。看看谷歌分析如何被注入到大多数网站中。
DOM 准备好后，您有两种方法可以插入动态 HTML（假设我们要将新的 HTML 插入到 中<div id="node-id"></div>）：
在节点上使用innerHTML：
var node = document.getElementById('node-id'); node.innerHTML('<p>some dynamic html</p>');使用 DOM 方法：
var node = document.getElementById('node-id'); var newNode = document.createElement('p'); newNode.appendChild(document.createTextNode('some dynamic html')); node.appendChild(newNode);
使用 DOM API 方法可能是做事的纯粹方式，但innerHTML已被证明更快，并且在 JavaScript 库（如 jQuery）中使用。
注：在<script>将要成为你的内部<body>标记这个工作。
document.write()不适用于 XHTML。它在页面加载完成后执行，只是写出一串 HTML。
由于 HTML 在内存中的实际表示是 DOM，因此更新给定页面的最佳方法是直接操作 DOM。
您这样做的方法是以编程方式创建节点，然后将它们附加到 DOM 中的现有位置。对于[人为的]示例，假设我有一个div元素维护ID“header”属性，那么我可以通过这样做来引入一些动态文本：
// create my text
var sHeader = document.createTextNode('Hello world!');
// create an element for the text and append it
var spanHeader = document.createElement('span');
spanHeader.appendChild(sHeader);
// grab a reference to the div header
var divHeader = document.getElementById('header');
// append the new element to the header
divHeader.appendChild(spanHeader);
DOM 方法，如 Tom 所述。
iHunger 提到的innerHTML。
在设置属性和内容方面，DOM 方法比字符串更可取。如果您发现自己在编写代码innerHTML= '<a href="'+path+'">'+text+'</a>'，实际上是在客户端创建了新的跨站点脚本安全漏洞，如果您曾花时间保护服务器端，这有点令人难过。
与innerHTML 相比，DOM 方法传统上被描述为“慢”。但这并不是故事的全部。缓慢的是插入很多子节点：
for (var i= 0; i<1000; i++)
div.parentNode.insertBefore(document.createElement('div'), div);
这意味着 DOM 需要在其节点列表中找到正确的位置来插入元素、向上移动其他子节点、插入新节点、更新指针等工作负载。
另一方面，设置现有属性的值或文本节点的数据非常快；您只需更改一个字符串指针即可。这将比使用 innerHTML 序列化父级、更改它并重新解析它要快得多（并且不会丢失不可序列化的数据，如事件处理程序、JS 引用和表单值）。
有一些技术可以在没有如此缓慢的 childNodes 行走的情况下进行 DOM 操作。尤其要注意cloneNode和使用的可能性DocumentFragment。但有时innerHTML 确实更快。您仍然可以通过使用 innerHTML 编写带有属性值和文本内容占位符的基本结构，然后使用 DOM 填充它们，从而获得两全其美的效果。这使您不必编写自己的escapehtml()函数来解决上面提到的转义/安全问题。
也许在这种情况下使用 jQuery 是个好主意。它提供了方便的功能，您可以执行以下操作：
$('div').html('<b>Test</b>');
我不是在JavaScript，或者它的最佳实践特别大，但document.write()沿innerHtml()基本上可以让你写出来的字符串，可能会或可能不会是有效的HTML; 这只是字符。通过使用 DOM，您可以确保正确的、符合标准的 HTML，这将防止您的页面被明显错误的 HTML 破坏。
而且，正如 Tom 所说，JavaScript 是在页面加载后完成的；通过标准 HTML（通过 .html 文件或您的服务器所做的任何事情 [即 php]）完成页面的初始设置可能是更好的做法。