代码之家 › 专栏 › 技术社区 › Gary Willoughby

使用javascript编写HTML的正确方法是什么?

dynamic html javascript

Gary Willoughby · 技术社区 · 15 年前

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

为什么会这样?什么是对的方式?

12 回复 | 直到 6 年前

Migisha 10 年前

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 已经证明速度更快,并在jquery等JavaScript库中使用。

注: 这个 <script> 必须在你的 <body> 标记以使其工作。

Tom 15 年前

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

Nyla Pareska 15 年前

在这种情况下,最好使用jquery。它提供了方便的功能,您可以这样做:

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

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

bobince 15 年前

dom方法,如tom所概述的。
如Ihunger所述。

对于设置属性和内容,DOM方法比字符串更可取。如果你发现自己在写作 innerHTML= '<a href="'+path+'">'+text+'</a>' 实际上,您在客户机端创建了新的跨站点脚本安全漏洞,如果您花时间保护服务器端,这有点令人难过。

传统上,与InnerHTML相比,DOM方法被描述为__slow_。但事实并非如此。缓慢的是插入大量子节点:

 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() 用于解决上述转义/安全问题的功能。

Mohammad Usman 7 年前

你可以改变 innerHTML 或 outerHTML 而不是页面上的元素。

RoyalKnight 15 年前

我对JavaScript或其最佳实践不是特别擅长,但是 document.write() 随着 innerHtml() 基本上允许你写出 可能或不可能 是有效的HTML;它只是字符。通过使用DOM,您可以确保适当的、符合标准的HTML,从而防止页面通过明显不好的HTML进行破坏。

而且,正如汤姆提到的,JavaScript是在页面加载之后完成的;最好是通过标准HTML(通过.html文件或服务器执行的任何操作[即php])完成页面的初始设置。

Maiku Mori 15 年前

用javascript编写HTML有很多方法。

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

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

这些方法是:

node.innerhtml=“无论什么”;
document.createElement('div');和node.appendChild()等。

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

Rob 15 年前

当然,最好的方法是避免执行任何繁重的HTML 创造在你的javascript中?如果可能的话,从服务器发送下来的标记应该包含大部分内容,然后您可以使用CSS而不是蛮力删除/替换元素来操作这些内容。

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

Myriam Rouve 6 年前

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文件,但是您必须在希望对其进行解释的位置声明它。

因此, 文件编写 由于 “用户交互” (如单击或悬停),因为此时已经创建了DOM,而write方法将像上面所说的那样编写一个新页面(清除实际的执行堆栈,并启动一个新堆栈和一个新的DOM树)。在这种情况下,使用:

element.innerHTML=("Myfullcontent");

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

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

Mike Daniels 15 年前

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

你可能想要的是 innerHTML .

Community CDub 7 年前

我觉得你应该用,而不是 document.write ,类似于dom javascript API document.createElement , .createTextNode , .appendChild 类似的。安全,几乎跨浏览器。

ihunger's outerHTML 不是跨浏览器,而是IE。

csandreas1 7 年前

使用jquery,看看它有多简单:

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

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