小开

最佳答案

作为 document.write的推荐替代方案，您可以使用 DOM 操作直接查询并向 DOM 添加节点元素。

小开

尝试使用 getElementById ()或 getElementsByName ()访问特定的元素，然后使用 innerHTML 属性:

<html>
<body>
<div id="myDiv1"></div>
<div id="myDiv2"></div>
</body>


<script type="text/javascript">
var myDiv1 = document.getElementById("myDiv1");
var myDiv2 = document.getElementById("myDiv2");


myDiv1.innerHTML = "<b>Content of 1st DIV</b>";
myDiv2.innerHTML = "<i>Content of second DIV element</i>";
</script>
</html>

小开

这个问题取决于你实际上想要做什么。

通常，你可以使用 someElement.innerHTML或更好的 document.createElement和 someElement.appendChild代替 document.write。

您还可以考虑使用类似 jQuery 的库，并使用其中的修改函数: http://api.jquery.com/category/manipulation/

小开

在这里只需要说明一点，尽管由于表现问题(同步 DOM 注入和评估) ，使用 document.write是非常不受欢迎的，但是如果您使用 document.write根据需要注入脚本标记，那么还有 没有实际的1:1选择。

有很多很好的方法可以避免这样做(比如像需要这样管理依赖链的脚本加载器) ，但是它们更具侵入性，因此最好在站点/应用程序中使用 从头到尾。

小开

这可能是最正确、最直接的替代品: 插入邻接 HTML。

小开

下面的代码应该可以取代 document.write:

document.write=function(s){
var scripts = document.getElementsByTagName('script');
var lastScript = scripts[scripts.length-1];
lastScript.insertAdjacentHTML("beforebegin", s);
}

小开

HTML 被替换的原因是因为一个邪恶的 JavaScript 函数: < a href = “ https://developer.mozilla.org/en-US/docs/Web/API/document.write”rel = “ noReferrer”> document.write() 。

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

问题是:

写入文档流。在已关闭(或已加载)的文档上调用 document.write会自动调用 document.open，从而清除该文档。

—— 引用 MDN 的话

document.write() 有两个追随者，document.open()和 document.close()。当 HTML 文档加载时，文档是“打开的”。此时使用 document.write()将擦除整个(关闭的) HTML 文档，并用一个新的(打开的)文档替换它。这意味着你的网页已经擦除自己，并开始写一个新的网页-从头开始。

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

例如:

此示例将输出写入页面已加载的 HTML 文档之后。当你按下“消灭”按钮时，看看 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推荐的替代品。

示例: < code > var para = document.createElement (‘ p’) ; (document.createTextNode (‘ Hello,’)) ;

注意: 这会导致性能下降(比 .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>

小开

我没有看到 document.write的问题。如果您在 onload事件触发之前使用它(可能就是这样) ，例如从结构化数据构建元素，那么它就是合适的工具。在构建 DOM 之后，使用 insertAdjacentHTML或显式地将节点添加到 DOM 没有性能优势。我只是用一个旧的脚本测试了三种不同的方式，我曾经使用这个脚本为一个24/7服务的4个调制解调器的银行来安排调制解调器呼叫。

到完成时，这个脚本将创建超过3000个 DOM 节点，其中大部分是表单元格。在 Vista 上运行 Firefox 的7年电脑上，使用本地12kb 源文件中的 document.write和三个1px 的 GIF (重复使用约2000次) ，这个小练习只需不到2秒钟。这个页面刚刚弹出，完全形成，准备处理事件。

使用 insertAdjacentHTML不是一个直接的替代品，因为浏览器关闭脚本要求保持打开状态的标记，并使用 两倍的时间最终创建一个损坏的页面。将所有的片段写入一个字符串，然后将其传递给 insertAdjacentHTML将花费更长的时间，但是至少您得到了设计好的页面。其他选项(比如一次手动重新构建一个 DOM 节点)是如此荒谬，以至于我根本不会去那里。

有时使用 document.write。事实上，它是 JavaScript 中最古老的方法之一，这不是一个反对它的理由，而是一个有利于它的理由——它是高度优化的代码，能够完成它想要做的事情，并且从一开始就一直在做。

很高兴知道还有其他可用的后加载方法，但必须理解的是，这些方法的用途完全不同: 即在创建 DOM 并分配给它的内存之后修改它。如果您的脚本打算编写 HTML，而浏览器首先从这些 HTML 创建 DOM，那么使用这些方法本身就更加耗费资源。

只要写出来，然后让浏览器和解释器完成工作，这就是他们存在的目的。

PS: 我刚刚在 body标签中使用了一个 onload参数进行了测试，即使在这一点上，文档仍然是 open和 document.write()功能。此外，在最新版本的 Firefox 中，各种方法之间没有可察觉的性能差异。当然，在硬件/软件堆栈的某个地方可能存在大量的缓存，但这才是关键所在——让机器来完成这项工作。不过，对于一款廉价的智能手机来说，这可能会有所不同。干杯！

小开

我不确定这是否会起作用，但我想到

var docwrite = function(doc) {
document.write(doc);
};

这为我解决了错误消息的问题。

小开

可以组合插入邻接 HTML方法和 CurrentScript属性。

Element 接口的 insertAdjacentHTML()方法将指定的文本解析为 HTML 或 XML，并将结果节点插入到位于 指定位置的 DOM 树中:

在元素本身之前。
就在元素内部，在它的第一个子元素之前。
就在元素内部，在它的最后一个子元素之后。
在元素本身之后。

document.currentScript属性返回当前正在处理其脚本的 <script>元素。最佳位置是 在开始之前ーー新的 HTML 将在 <script>之前插入。为了匹配 document.write的本机行为，一个会放置文本下午，但是连续调用函数的节点不会按照调用它们的顺序放置(像 document.write那样) ，而是反过来放置。HTML 的出现顺序可能比它们相对于 <script>标记的位置更重要，因此使用了 在开始之前。

document.currentScript.insertAdjacentHTML(
'beforebegin',
'This is a document.write alternative'
)

小开

使用

var  documentwrite =(value, method="", display="")=>{
switch(display) {
case "block":
var x = document.createElement("p");
break;
case "inline":
var x = document.createElement("span");
break;
default:
var x = document.createElement("p");
}
            

var t = document.createTextNode(value);
x.appendChild(t);
            

if(method==""){
document.body.appendChild(x);
}
else{
document.querySelector(method).appendChild(x);
           

}
}

并根据您的需求调用该函数，如下所示

  documentwrite("My sample text"); //print value inside body
documentwrite("My sample text inside id", "#demoid", "block");  // print value inside id and display block
documentwrite("My sample text inside class", ".democlass","inline"); // print value inside class and and display inline

替代 document. write 的方法有哪些？

问题是:

例如:

其他选择:

.innerHTML替代品的例子:

`.innerHTML`替代品的例子: