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

在编写动态HTML时，经验丰富的web开发人员似乎不赞成在JavaScript中使用

document.write（）

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

document.write（）

不适用于XHTML。它在页面完成加载后执行，只不过写出一个HTML字符串

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

执行此操作的方法是以编程方式创建节点，然后将它们附加到DOM中的现有位置。出于[人为的]示例的目的，假设我有一个

div

元素维护“header”的

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

---

您可以更改页面上某个元素的

innerHTML

或

outerHTML

。

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

---

您可能想要的是。

我对JavaScript及其最佳实践不是特别在行，但

document.write（）

以及

innerHtml（）

基本上允许您写出可能是或可能不是有效HTML的字符串；只是角色而已。通过使用DOM，您可以确保正确的、符合标准的HTML，从而防止页面通过糟糕的HTML被破坏

而且，正如Tom提到的，JavaScript是在页面加载之后完成的；更好的做法可能是通过标准HTML（通过.HTML文件或服务器执行的任何操作（例如php））完成页面的初始设置。

document.write（）

仅在最初解析页面和创建DOM时才起作用。一旦浏览器到达关闭标记且DOM就绪，您就不能再使用

document.write（）

我不会说使用

document.write（）

是正确的还是错误的，这取决于您的情况。在某些情况下，您只需要使用

document.write（）

即可完成任务。看看谷歌分析是如何被注入大多数网站的

DOM就绪后，有两种方法可以插入动态HTML（假设我们将在

中插入新的HTML）：

在节点上使用innerHTML：

var node = document.getElementById('node-id');
node.innerHTML('<p>some dynamic html</p>');

使用domapi方法可能是最纯粹的方法，但是

innerHTML

已经被证明速度更快，并且在jQuery等JavaScript库中被秘密使用

---

注意：必须将

放在您的

标记中，才能使其工作。

使用JavaScript编写html有很多方法

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

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

这些方法是：

• node.innerHTML=“无论什么”
• document.createElement（'div'）；和node.appendChild（）等

---

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

我认为您应该使用，而不是

文档。编写
，DOM JavaScript API，如
文档。createElement
，
.createTextNode
，
。appendChild
等。安全和几乎跨浏览器

outerHTML
不是跨浏览器的，它只是IE

DOM方法，正如Tom所概述的

iHunger提到的innerHTML

在设置属性和内容时，DOM方法比字符串更可取。如果您发现自己正在编写
innerHTML='
，那么实际上您正在客户端创建新的跨站点脚本安全漏洞，如果您花时间保护服务器端，这有点令人遗憾

与innerHTML相比，DOM方法传统上被描述为“慢”。但事实并非如此。缓慢的是插入了很多子节点：

 for (var i= 0; i<1000; i++)
     div.parentNode.insertBefore(document.createElement('div'), div);

for（var i=0；i在这种情况下使用jQuery可能是个好主意。它提供了方便的功能，您可以执行以下操作：

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

$（'div'）.html（'Test'）；

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

如果你正在做一些“聪明”的事情，比如模拟小部件系统，这不适用。
使用jquery，看看它有多简单：

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

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

var a='这是一些html'；
$（“#结果”）.html（a）；
//html
元素。InnerHtml=allmycontent
：将重新写入元素内的所有内容。必须使用变量
let allmycontent=“这是我要在此元素内打印的内容”
将所需的全部内容存储在此元素中。如果不是每次调用此函数，则元素的内容将被擦除，并替换为上次对其进行的调用

document.write（）
：可以多次使用，每次在页面上调用的位置打印内容

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

这里有一个简单的例子：所有的李都放在你的菜单上
    var a = '<h1> this is some html </h1>';
    $("#results").html(a);

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

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

element.innerHTML=("Myfullcontent");