javascript - document.write 的替代品是什么？

Question

在教程中我学会了使用 document.write。现在我明白很多人不赞成这样做。我试过 print()，但它确实将它发送到打印机。

那么我应该使用哪些替代方案，为什么我不应该使用 document.write？ w3schools 和 MDN 都使用 document.write。

Answer 1

您的 HTML 被替换的原因是因为一个邪恶的 JavaScript 函数: document.write() .

这绝对是“糟糕的形式”。如果您在页面加载时使用它，它仅适用于网页；如果您在运行时使用它，它将用输入替换您的整个文档。如果您将它作为严格的 XHTML 结构来应用，它甚至不是有效代码。

---

问题:

document.write writes to the document stream. Calling document.write on a closed (or loaded) document automatically calls document.open which will clear the document.

-- quote from the MDN

document.write()有两个追随者，document.open() , 和 document.close() .加载 HTML 文档时，文档处于“打开”状态。 文档加载完成后，文档“关闭”。使用document.write()此时将删除整个(关闭的)HTML 文档并将其替换为新的(打开的)文档。这意味着您的网页已自行删除并开始编写新页面 - 从头开始​​。

我相信document.write()也会导致浏览器性能下降(如果我错了请纠正我)。

---

一个例子:

此示例在页面加载之后将输出写入 HTML 文档。 watch document.write()当你按下“消灭”按钮时，邪恶的力量会清除整个文档:

I am an ordinary HTML page.  I am innocent, and purely for informational purposes. Please do not <input type="button" onclick="document.write('This HTML page has been succesfully exterminated.')" value="exterminate"/>
me!

---

备选方案:

• .innerHTML 这是一个很好的选择，但是这个属性必须附加到要放置文本的元素上。

示例:document.getElementById('output1').innerHTML = 'Some text!';

• .createTextNode() 是 W3C 推荐的替代方案.

示例:var para = document.createElement('p');
para.appendChild(document.createTextNode('你好，'));

注意:已知这会降低一些性能(比 .innerHTML 慢)。我建议改用 .innerHTML。

---

带有 .innerHTML 选项的示例:

I am an ordinary HTML page. 
I am innocent, and purely for informational purposes. 
Please do not 
<input type="button" onclick="document.getElementById('output1').innerHTML = 'There was an error exterminating this page. Please replace <code>.innerHTML</code> with <code>document.write()</code> to complete extermination.';" value="exterminate"/>
 me!
<p id="output1"></p>