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

 

我在一些文章中看到，在编写动态HTML时，人们对使用JavaScript中的document.write()不满。

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

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已经被证明要快得多，并在JavaScript库（如jQuery）中使用。

    注意： <script>必须位于<body>标签内才能使用。

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

  • DOM方法，如Tom所述。

  • innerHML，如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引用和表单值）要快得多。

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

    链接地址: http://www.djcxy.com/p/71665.html

    上一篇: What is the correct way to write HTML using Javascript?

    下一篇: What are some resources for getting started in operating system development?