使用 Javascript 编写 HTML 的正确方法是什么？答案

【问题标题】：What is the correct way to write HTML using Javascript?使用 Javascript 编写 HTML 的正确方法是什么？
【发布时间】：2010-12-04 18:00:05
【问题描述】：

似乎有经验的 Web 开发人员在编写动态 HTML 时不赞成在 JavaScript 中使用 document.write()。

这是为什么？ 正确的方法是什么？

【问题讨论】：

jQuery.我没有将此添加为实际答案，但我接近了。它可以正确处理 dom 操作，同时让您编写如下简单的内容： $("
text
sub

").appendTo('body') ;
这是 jQuery meme 真正有意义的情况。 “我看到你正在尝试使用 JavaScript 编写 HTML。你应该完全放弃它并使用 jQuery！”
jQuery 绝不是在 JavaScript 中创建 HTML 的“正确”方式。它是用 JavaScript 编写的，将使用下面答案中的一种或多种方法，缺点是作为一个通用库，它不会为您作为开发人员所拥有的每种情况做出明智的策略选择。
@Tim：它并不比给出的任何方法更“正确”或“不正确”，但它是一种完全有效的方法。没有一个答案在所有情况下都是“正确的”。您给定的“劣势”只是一个特征：当潜在收益微不足道时，我可能会或可能不会花时间分析 HTML 生产的最佳策略。根据您的选择，透明地管理这种复杂性可能是优势也可能是劣势。除非需要更优化的策略，否则可能会决定使用 jQuery。
@Adam - 有理有据。 “缺点”在编写最有效的代码方面仍然是准确的，但我认为效率的提高并不总是重要到足以超过 jQuery 方法的便利性，当且仅当 jQuery 已经被用于另一个非- 页面上的琐碎任务。这当然不值得单独使用 jQuery。

标签： javascript html dynamic code-generation document.write

【解决方案1】：

document.write() 仅在页面最初被解析并创建 DOM 时才有效。一旦浏览器到达结束 </body> 标记并且 DOM 准备就绪，您就不能再使用 document.write()。

我不会说使用document.write() 是正确还是不正确，这取决于您的情况。在某些情况下，您只需要document.write() 即可完成任务。看看 Google 分析是如何被注入到大多数网站的。

在 DOM 准备好之后，您有两种方法可以插入动态 HTML（假设我们要在 <div id="node-id"></div> 中插入新的 HTML）：

在节点上使用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() 仅在页面首次加载和创建时有用。为了事后动态更新页面，DOM 方法或 innerHTML() 是必须的。
你能证明innerHTML总是更快吗？我怀疑情况总是如此。如果您一次将一个节点添加到 DOM 中的现有节点，那么我预计 innerHTML 会更快，因为浏览器可能必须在每个阶段操作和重新渲染文档的某些部分，但是如果您创建一个新的节点树并在最后将其根节点添加到 DOM，我希望这与使用 innerHTML 一样快或更快。
@Maiku - 哈哈，真的 :) @Tim - 这是一个基准 quirksmode.org/dom/innerhtml.html 实际上，使用文档片段似乎是最快的：ejohn.org/blog/dom-documentfragments
node.innerHTML = '<p>some dynamic html</p>'; ?至少在 Android innerHTML 上的 WebView 上不是一个函数。

【解决方案2】：

document.write() 不适用于 XHTML。它在页面完成加载之后执行，并且除了写出一串HTML 之外什么也不做。

由于 HTML 的实际内存表示是 DOM，因此更新给定页面的最佳方法是直接操作 DOM。

您执行此操作的方式是以编程方式创建节点，然后将它们附加到 DOM 中的现有位置。对于 [人为的] 示例，假设我有一个 div 元素维护“标题”的 ID 属性，那么我可以通过这样做引入一些动态文本：

// 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);

【讨论】：

调用的时候实际执行了。如果您在页面加载后调用它，它将覆盖内容。
坚持使用 HTML，document.write 仍然是一个有用的工具。

【解决方案3】：

Tom 概述的 DOM 方法。
innerHTML，如 iHunger 所述。

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 引用和表单值）。

有一些技术可以在没有这么慢的 childNode 行走的情况下进行 DOM 操作。特别要注意cloneNode 和使用DocumentFragment 的可能性。但有时innerHTML 确实更快。您仍然可以通过使用 innerHTML 来编写带有属性值和文本内容的占位符的基本结构，然后使用 DOM 填充它们，从而获得两全其美的效果。这使您不必编写自己的 escapehtml() 函数来解决上述转义/安全问题。

【讨论】：

【解决方案4】：

也许在这种情况下使用 jQuery 是一个好主意。它提供了方便的功能，您可以执行以下操作：

$('div').html('<b>Test</b>');

查看http://docs.jquery.com/Attributes/html#val 了解更多信息。

【讨论】：

因为人们都在谈论更优雅、更快和跨浏览器的做事方式，并且必须加载 jQuery 来实现它，所以这不是答案。

【解决方案5】：

我不是特别擅长 JavaScript 或其最佳实践，但 document.write() 和 innerHtml() 基本上允许您写出 可能是或可能不是有效 HTML 的字符串；这只是字符。通过使用 DOM，您可以确保正确的、符合标准的 HTML，从而防止您的页面因明显糟糕的 HTML 而中断。

而且，正如 Tom 所说，JavaScript 是在页面加载后完成的；通过标准 HTML（通过 .html 文件或您的服务器所做的任何事情 [即 php]）对您的页面进行初始设置可能是一种更好的做法。

【讨论】：

如果您使用 javascript 编写动态组件，您最终将使用 javascript 写入 DOM。虽然 document.write() 并不是真正可行的方法，但在大多数情况下，您可能会使用 innerHTML。由于 innerHTML 比在所有浏览器中使用 createNode/appendChild 快得多。当您必须生成大量 html/DOM 元素时，这一点非常重要。 + 这是文件，不是文件 ;)

【解决方案6】：

您可以改为更改页面上元素的innerHTML 或outerHTML。

【讨论】：

最好是innerHTML，因为outerHTML没有得到广泛支持。

【解决方案7】：

element.InnerHtml= allmycontent: 将重写元素内的所有内容。你必须使用一个变量let allmycontent="this is what I want to print inside this element"来存储你想要在这个元素中的全部内容。如果不是每次调用此函数，元素的内容将被删除并替换为您最后一次调用它。

document.write(): 可以多次使用，每次调用的地方都会在页面上打印内容。

但请注意：document.write() 方法仅可用于在页面创建时插入内容。因此，当需要编写大量数据（如产品目录或图像）时，请使用它来避免重复。

这里是一个简单的例子：你所有的侧边菜单的li都存储在一个数组“tab”中，你可以直接在html页面中创建一个带有script标签的js脚本，然后在一个要在页面上插入这些 li 的迭代函数。

<script type="text/javascript">
document.write("<ul>");
for (var i=0; i<=tab.length; i++){
    document.write(tab[i]);
    }document.write("</ul>");
</script>`

这是因为 Js 在加载过程中以线性方式解释。因此，请确保您的脚本在您的 html 页面中的正确位置。您也可以使用外部 Js 文件，但同样您必须在您希望它被解释的位置声明它。

因此，由于“用户交互”（如点击或悬停），不能调用 document.write 在您的页面上写入内容，因为然后 DOM 已经创建，并且 write 方法将像上面所说的那样写入一个新页面（清除实际的执行堆栈并启动一个新堆栈和一个新的 DOM 树）。在这种情况下使用：

element.innerHTML=("Myfullcontent");

要了解有关文档方法的更多信息：打开您的控制台：document; 然后打开：__proto__: HTMLDocumentPrototype

您将在文档对象中看到函数属性“write”。您还可以使用 document.writeln 在每个语句中添加一个新行。要了解有关函数/方法的更多信息，只需将其名称写入控制台，不带括号：document.write; 控制台将返回描述而不是调用它。

【讨论】：

【解决方案8】：

用 JavaScript 编写 html 的方法有很多。

document.write 仅在您想在页面实际加载之前写入页面时才有用。如果在页面加载后（在 onload 事件中）使用 document.write()，它将创建新页面并覆盖旧内容。它也不适用于 XML，包括 XHTML。

另一方面，在创建 DOM（页面加载）之前不能使用其他方法，因为它们直接与 DOM 一起工作。

这些方法是：

node.innerHTML = "随便";
document.createElement('div');和 node.appendChild() 等。

在大多数情况下 node.innerHTML 更好，因为它比 DOM 函数更快。大多数情况下，它还使代码更易读、更小。

【讨论】：

【解决方案9】：

当然，最好的方法是完全避免在您的 JavaScript 中进行任何繁重的 HTML 创建？从服务器发送下来的标记应该包含大部分内容，然后您可以使用 CSS 而不是暴力删除/替换元素（如果可能的话）对其进行操作。

如果你正在做一些“聪明”的事情，比如模拟一个小部件系统，这不适用。

【讨论】：

【解决方案10】：

document.write 方法非常有限。您只能在页面完成加载之前使用它。您不能使用它来更新已加载页面的内容。

你可能想要的是innerHTML。

【讨论】：

【解决方案11】：

我认为您应该使用 DOM JavaScript API 而不是 document.write，例如 document.createElement、.createTextNode、.appendChild 等。安全且几乎可以跨浏览器。

ihunger's outerHTML 不是跨浏览器，它只是 IE。

【讨论】：

【解决方案12】：

使用 jquery，看看它是多么容易：

    var a = '<h1> this is some html </h1>';
    $("#results").html(a);

       //html
    <div id="results"> </div>

【讨论】：