一尘不染

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

html

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

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


阅读 229

收藏
2020-05-10

共1个答案

一尘不染

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

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

准备好DOM之后,您可以通过两种方式插入动态HTML(假设我们要向中插入新的HTML <div id="node-id"></div>):

  1. 在节点上使用innerHTML:

    var node = document.getElementById('node-id');
    

    node.innerHTML(‘

    some dynamic html

    ‘);

  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事实证明,这样做速度更快,并且已在jQuery之类的JavaScript库中广泛使用。

注:<script>将要成为你的内部<body>标记这个工作。

2020-05-10