什么是使用JavaScript编写HTML的正确方法？
我在一些文章中看到，在编写dynamicHTML时，人们对使用JavaScript中的document.write()不满。
为什么是这样？ 什么是正确的方法？
document.write()只在最初parsing页面和创buildDOM时才起作用。 一旦浏览器到达closures</body>标记并且DOM已经准备就绪，您就不能再使用document.write()了。
我不会说使用document.write()是正确的还是不正确的，这取决于你的情况。 在某些情况下，您只需要使用document.write()来完成任务。 看看谷歌分析如何被注入到大多数网站。
在DOM准备好之后，你有两种插入dynamicHTML的方法（假设我们要插入新的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已经被certificate更快，并且在JavaScript库（如jQuery）中被使用。
注意： <script>必须位于<body>标签内才能使用。
document.write()不适用于XHTML。 它在页面加载完成后执行，除了写出一串HTML外，
由于HTML的实际内存中表示forms是DOM，因此更新给定页面的最佳方法是直接操作DOM。
你要这样做的方式是以编程方式创build节点，然后将它们附加到DOM中的现有位置。 举个例子，假设我有一个div元素来维护“header”的ID属性，那么我可以通过这样做来引入一些dynamic文本：
// 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所述。
-
innerHML，正如iHunger所提到的。
DOM方法比设置属性和内容的string更可取。 如果你发现自己写的innerHTML= '<a href="'+path+'">'+text+'</a>'你实际上是在客户端创build新的跨站脚本安全漏洞，这是一个如果你已经花时间保护你的服务器端，那么有点伤心。
与innerHTML相比，DOM方法传统上被描述为“缓慢”。 但这不是全部的事情。 什么是慢插入大量的子节点：
for (var i= 0; i<1000; i++) div.parentNode.insertBefore(document.createElement('div'), div);
这将转化为DOM的工作负载，在其节点列表中find正确的位置来插入元素，移动其他子节点，插入新节点，更新指针等等。
另一方面，设置现有属性的值或文本节点的数据速度非常快; 你只需要改变一个string指针就可以了。 这要比使用innerHTML序列化父代，更改它并parsing它（并且不会失去不可序列化的数据，如事件处理程序，JS引用和表单值）要快得多。
有一些技术可以在不太慢的情况下进行DOM操作。 特别要注意cloneNode的可能性，并使用DocumentFragment 。 但有时innerHTML真的更快。 通过使用innerHTML来为属性值和文本内容使用占位符编写基本结构，然后使用DOM填充后，仍然可以获得两全其美的效果。 这节省了你不得不编写自己的escapehtml()函数来解决上面提到的转义/安全问题。
在这种情况下，也许一个好主意是使用jQuery。 它提供了方便的function，你可以做这样的事情：
$('div').html('<b>Test</b>');
您可以改变页面上元素的innerHTML或outerHTML 。
我不是特别擅长JavaScript或其最佳实践，但是document.write()和innerHtml()一起允许你写出可能有效或无效的HTMLstring。 这只是人物。 通过使用DOM，您可以确保正确的，符合标准的HTML，通过简单的HTML来保持页面不被破坏。
而且，正如汤姆提到的，JavaScript是在页面加载完成之后完成的; 通过标准的HTML（通过.html文件或者你的服务器做的任何事情（比如php））来完成页面的初始设置可能是一个更好的做法。
用JavaScript编写HTML有很多方法。
document.write只有在实际加载之前要写入页面时才有用。 如果在页面加载（onload事件）后使用document.write（），它将创build新页面并覆盖旧内容。 此外，它不适用于XML，包括XHTML。
另一方面，在创buildDOM（页面加载）之前，不能使用其他方法，因为它们直接与DOM一起工作。
这些方法是：
- node.innerHTML =“无论”;
- 使用document.createElement（ 'DIV'）; 和node.appendChild（）等。
在大多数情况下，node.innerHTML更好，因为它比DOM函数更快。 大部分时间它也使代码更可读和更小。
当然，最好的方法是避免在JavaScript中做任何繁重的HTML 创build ？ 从服务器发出的标记应该包含它的大部分，然后你可以使用CSS而不是蛮力删除/replace元素来操作，如果可能的话。
如果您正在模拟一个小部件系统“聪明”的事情，这不适用。
document.write方法非常有限。 您只能在页面加载完成之前使用它。 您不能使用它来更新已加载页面的内容。
你可能想要的是innerHTML 。
我认为你应该使用，而不是document.write DOM DOM API，如document.createElement ， .createTextNode ， .appendChild等。 安全和几乎跨浏览器。
ihunger的 outerHTML不是跨浏览器，只是IE浏览器。
使用jQuery，看看它是多么容易：
var a = '<h1> this is some html </h1>'; $("#results").html(a); //html <div id="results"> </div>
