什么是document.write的替代方法?

在教程中,我学会了使用document.write 。 现在我明白很多人都皱起了眉头。 我试过print() ,但它真的把它发送到打印机。

那么我应该使用什么替代方法,为什么我不能使用document.write ? w3schools和MDN都使用document.write

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

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

这绝对是“糟糕的forms”。 它只适用于网页,如果你在页面加载使用它; 如果您在运行时使用它,它将用inputreplace整个文档。 如果您将其作为严格的XHTML结构应用,那甚至不是有效的代码。


问题:

document.write写入文档stream。 在closures的(或加载的)文档上调用document.open会自动调用将清除文档的document.open。

– 来自MDN的报价

document.write()有两个父亲, document.open()document.close() 。 加载HTML文档时,文档是“打开”的。 当文件完成加载时,文件已经“closures”。 在这一点上使用document.write()会擦除整个(closures的)HTML文档,并将其replace为新的(打开的)文档。 这意味着您的网页已经自行清除,并开始编写一个新的页面 – 从头开始​​。

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


一个例子:

本示例在页面加载后将输出写入HTML文档。 当按下“消灭”button时,观察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! 

这里是应该replacedocument.write的代码:

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

只是在这里说一下,虽然使用document.write由于性能问题 (同步DOM注入和评估)而受到高度的关注 ,但如果使用document.write来注入脚本标记,也没有实际的1:1select一经请求。

有很多很好的方法可以避免这样做(例如像RequireJS这样的脚本加载器来pipe理你的依赖链),但是它们更具侵入性,所以最好在整个站点/应用程序中使用。

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

通常,而不是做document.write你可以使用someElement.innerHTML或更好, document.createElement someElement.appendChild

你也可以考虑使用像jQuery一样的库,并使用其中的修改function: http : //api.jquery.com/category/manipulation/

这可能是最正确的,直接replace: insertAdjacentHTML 。

尝试使用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> 

我不确定这是否能正常工作,但我想到了

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

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

我没有看到document.write的问题。 如果您在onload事件触发之前使用它(如您所想的那样),例如从结构化数据构build元素,则它是适当的工具。 使用insertAdjacentHTML或在构buildDOM之后向DOM显式添加节点没有性能优势。 我只用三个不同的方式testing了它,我曾经使用一个旧的脚本来调度传入调制解调器呼叫在一个4调制解调器银行24/7服务。

到这个脚本完成的时候,这个脚本创build了3000多个DOM节点,主要是表格单元格。 在Vista上运行7年的电脑上,这个小小的练习使用本地12kb源文件的document.write和三个1px的GIF重用2000次左右。 这个页面刚刚形成,准备好处理事件。

使用insertAdjacentHTML不是一个直接的替代,因为浏览器closures了脚本所需的标签保持打开,并且需要两倍的时间来最终创build一个损坏的页面。 将所有的块写入一个string,然后将它传递给insertAdjacentHTML需要更长的时间,但至less你得到了devise的页面。 其他选项(如一次手动重buildDOM一个节点)非常荒谬,甚至没有去那里。

有时document.write是使用的东西。 它是JavaScript中最古老的方法之一,并不意味着反对它,而是一个有利于它的观点 – 它是高度优化的代码,完全符合它从一开始就一直在做的事情。

很高兴知道有可供select的后加载方法,但必须明白,这些方法完全是为了不同的目的; 即在创buildDOM之后修改DOM,并为其分配内存。 如果您的脚本首先要编写浏览器创buildDOM的HTML,那么使用这些方法本质上是更耗费资源的。

只要写下来,让浏览器和解释器来做这件事。 这就是他们在那里。

PS:我只是在body标签中使用了一个onload参数进行了testing,甚至在这一点上文档仍然是opendocument.write()按照预期的方式工作。 另外,在最新版本的Firefox中,各种方法之间没有明显的性能差异。 当然,硬件/软件堆栈中可能会出现大量的caching,但这确实是一个问题 – 让机器完成工作。 虽然这可能会在便宜的智能手机上有所作为。 干杯!

document.currentScript.insertAdjacentHTML('beforebegin', 'this is the document.write alternative');

https://developer.mozilla.org/en-US/docs/Web/API/Document/currentScript https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML