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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (14)

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

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

提问于
用户回答回答于

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

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

在DOM准备好之后,您有两种插入动态HTML的方法(假设我们将插入新的HTML <div id="node-id"></div>):

  1. 在节点上使用innerHTML: var node = document.getElementById('node-id'); node.innerHTML('<p>some dynamic html</p>');
  2. 使用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元素保持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);

扫码关注云+社区