Question

我在一些帖子中看到人们在编写动态HTML时在javascript中使用document.write()时感到不满。

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

Answer 1

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

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

在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>标记内，才能生效。

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

Answer 3

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

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

请查看http://docs.jquery.com/Attributes/html#val了解详情。

Answer 4

DOM方法，如Tom。
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在其nodelist中找到正确位置以插入元素，移动其他子节点，插入新节点，更新指针等等的大量工作。

另一方面，设置现有属性的值或文本节点的数据非常快;你只需更改一个字符串指针就可以了。这比使用innerHTML对父级进行序列化，更改它并将其解析回来要快得多（并且不会丢失不可重复的数据，如事件处理程序，JS引用和表单值）。

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

Answer 5

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

Answer 6

我对JavaScript或其最佳做法并不是特别擅长，但document.write()和innerHtml()基本上允许您写出可能或不可能有效的字符串HTML;这只是人物。通过使用DOM，您可以确保正确的，符合标准的HTML，这样可以防止您的页面因明显错误的HTML而中断。

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

Answer 7

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

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

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

这些方法是：

node.innerHTML =“Whatever”;
使用document.createElement（ 'DIV'）;和node.appendChild（）等..

在大多数情况下，node.innerHTML更好，因为它比DOM功能更快。大多数时候它也使代码更具可读性和更小。

Answer 8

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

如果您正在做一些“聪明”的事情，例如模仿小部件系统，则不适用。

Answer 9

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

document.write()：可以多次使用，每次打印内容都会在页面上进行调用。

但请注意： document.write（）方法仅对于在创建页面时插入内容非常有用。因此，在将大量数据写入产品或图像目录时，请不要重复使用它。

这里有一个简单的例子：您的旁边菜单中的所有li都存储在一个数组“tab”中，您可以使用脚本标记直接创建一个js脚本到html页面中，然后使用write方法迭代函数，您希望在页面上插入这些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; 控制台将返回描述而不是调用它。

Answer 10

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

您可能想要的是innerHTML。

Answer 11

我认为您应该使用document.write，document.createElement，.createTextNode之类的DOM JavaScript API代替.appendChild。安全且几乎跨浏览器。

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

Answer 12

使用jquery，看看它有多容易：

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

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

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

12 个答案: