月光微博客 » 微网络 » 替换Document.Write函数的方法

替换Document.Write函数的方法

替换Document.Write函数的方法

  JavaScript中的document.write()函数是个很简单的函数,很多初学JavaScript的小伙伴都有用到,但是,这个函数有很多坑,会引发很多问题,使用document.write()函数,Chrome的开发者工具的控制台中会出现警告信息,使用该函数加载资源会让页面的展现缓慢,还会创建一个新的文档流,document.write() 有两个伙伴:document.open()和 document.close()。加载HTML文档时,该文档为“打开”状态。 文档加载完成后,文档已“关闭”。 使用 document.write() 这时将删除整个(关闭的)HTML文档,并用一个新的(打开的)文档替换。这意味着网页已擦除自身,并开始从头开始编写新页面。因此不建议在代码中使用document.write这个函数。

  替代的方法是:

  1、如果想要加载一个JavaScript资源,那么使用下面的代码来替代。

var js = document.createElement('script');
js.src = 'myscript.js';
var first = document.getElementsByTagName('script')[0];
first.parentNode.insertBefore(js, first);

  2、如果是想要输出一个信息,例如abc,这里提供一个替代该函数的方案,替代document.write('abc')的方法是使用下面的代码。

document.currentScript.insertAdjacentHTML('afterEnd','abc')。

  "beforebegin" — 将 html 插入到指定标签前插入,

  "afterbegin" — 将 html 插入到指定标签开头,

  "beforeend" — 将 html 插入到指定标签末尾,

  "afterend" — 将 html 插入到指定标签后。

  3、另一种替代方法是innerHTML,但是必须将此属性附加到要放置文本的元素上。

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

相关文章

发表留言