精华内容
下载资源
问答
我要提问
  • document.write document.write()的用法 千次阅读
    2020-09-04 14:35:49

    一、定义和用法

    文档节点的write()方法用于写入文档内容，可以传多个参数，写入的字符串会按HTML解析。
    语法：document.write()
    参数：字符串，可以传多个字符串参数
    返回值：undefined
     

    二、注意事项

    如果document.write()在DOMContentLoaded或load事件的回调函数中，当文档加载完成，则会先清空文档（自动调用document.open()），再把参数写入body内容的开头。

    在异步引入的js和DOMContentLoaded或load事件的回调函数中运行document.write()，运行完后，最好手动关闭文档写入（document.close()）。
     

    三、示例代码

    在head中运行document.write()，则参数写在body内容的开头。

    <!-- 运行前 -->
<head>
    <script>
        document.write('<p>test</p>');
    </script>
</head>
<body>
    <h2>write()</h2>
</body>
 
<!-- 运行后 -->
<head>
    <script>
        document.write('<p>test</p>');
    </script>
</head>
<body>
    <p>test</p>
    <h2>write()</h2>
</body>

    在body中运行document.write()，则参数写在运行的script标签后面

    <!-- 运行前 -->
<div>
    <script>
        document.write('<p>test</p>');
    </script>
    <p>content</p>
</div>
 
<!-- 运行后 -->
<div>
    <script>
        document.write('<p>test</p>');
    </script>
    <p>test</p>
    <p>content</p>
</div>

    同步引用外部js，参数也是写在运行的script标签后面

    // syncWrite.js
document.write('<p>test</p>');
<!-- syncWrite.html -->
<!-- 运行前 -->
<body>
    <script src="syncWrite.js"></script>
    <p>content</p>
</body>
 
<!-- 运行后 -->
<body>
    <script src="syncWrite.js"></script>
    <p>test</p>
    <p>content</p>
</body>

    异步引用外部js，必须先运行document.open()清空文档，然后才能运行document.write()，参数写在body内容的开头。
    如果不先运行document.open()，直接运行document.write()，则无效

    // asyncWrite.js
document.open();
document.write('<p>test</p>');
document.close();
<!-- asyncWrite.html -->
<!-- 运行前 -->
<body>
    <script src="asyncWrite.js" async></script>
</body>
 
<!-- 运行后 -->
<body>
    <p>test</p>
</body>

    如果document.write()在DOMContentLoaded或load事件的回调函数中，则不管是在head中，body中，同步的js中，异步的js中，
    都会先清空文档（自动调用document.open()），然后运行document.write()，参数写在body内容的开头

    <!-- 运行前 -->
<body>
    <script>
        window.addEventListener('load', function () {
            document.write('<p>test</p>');
            document.close();
        }, false);
    </script>
</body>
 
<!-- 运行后 -->
<body>
    <p>test</p>
</body>

    document.write()也能写入含有script标签的字符串，但是需要转义。写入的script标签中的内容会正常运行。

    <!-- 运行前 -->
<script>
    document.write('<script>document.write("<p>test</p>");<\/script>');
</script>
 
<!-- 运行后 -->
<script>
    document.write('<script>document.write("<p>test</p>");<\/script>');
</script>
<script>document.write("<p>test</p>");</script>
<p>test</p>
document.write()可以传入多个参数。

<!-- 运行前 -->
<body>
    <script>
        document.write('<h2>multiArgument</h2>','<p>test</p>');
    </script>
</body>
 
<!-- 运行后 -->
<body>
    <script>
        document.write('<h2>multiArgument</h2>','<p>test</p>');
    </script>
    <h2>multiArgument</h2>
    <p>test</p>
</body>

     
    ————————————————————————————

    版权声明：本文为博主[weixin_33989780]文章，如有侵权请联系删除。
    本文链接：https://segmentfault.com/a/1190000007958530

    更多相关内容

  • document.write()和document.writeln()的区别及向指定位置写html

     千次阅读 2021-06-12 11:03:45
    一、document.write()和document.writeln()的区别解决思路：两者都是JavaScript向客户端输出的方法，对比可知写法上的差别是一个ln--line的简写，换言之，writeln方法是以行输出的，相当于在?winte?输出后加上一个换...

    一、document.write()和document.writeln()的区别

    解决思路：

    两者都是JavaScript向客户端输出的方法，对比可知写法上的差别是一个ln--line的简写，换言之，writeln

    方法是以行输出的，相当于在?winte?输出后加上一个换行符。

    注意：document.write方法可以用在两方面:在网页载入过程中用实时脚本创建网页内容以及用延时脚本创建本窗口或新窗口的内容.该方法需要一个字符串参数,它是写到窗口或框架中的HTML内容.该字符串参数可以是变量或值为字符串的表达式,写入内容常常包含HTML标记.

    记住,载入网页后,浏览器输出流将自动关闭.在些之后任何一个对当前网页的document.write()方法都将打开一个新的输出流,它将清除当前网页输出内容(包括源文档中的任何变是和值).因此,如果希望用脚本生成的HTML内容替换当前网页,就必须把HTML内容连接起来赋给一个变量.这里,使用document.write()来完成写操作.不必清除文档并打开一个新的数据流,一个document.write()调用就OK了.

    关于document.write()方法,还需要说明它的相关方法document.close().脚本向窗口(不管是本窗口还是其它窗口)写完内容后必须关闭输出流.在脚本的最后一个document.write()

    方法后面.必须确保有document.close()方法.不这样做就不能显示图像和表单.而且,后面调用的任何document.write()

    只会将内容追加到网页后,而不会清除现有内容,写入新值

    具体步骤：

    1.打开一个空白窗口。

    window.open()

    2.用 write 方法向空白窗口写入代码。

    document.write("Line1")

    document.write("Line1")

    3.用 writeln 方法向空白窗口写入代码。

    document.writeln("Line1")

    document.writeln("Line2")

    4．完整代码示例：

    with(window.open()){

    document.write("Line1")

    document.write("Line1")

    document.writeln("Line1")

    document.writeln("Line2")

    }

    注意：两种方法仅当在查看源代码时才看得出区别。

    特别提示：把上面的代码加入网页中，然后查看弹出窗口的源代码，将会看到：

    Line1Line1Line1

    Line2

    页面效果和源代码如图。

    a4c26d1e5885305701be709a3d33442f.png

    write和writeln方法的输出比较

    特别说明

    总的来说，一般情况下用两种方法输出的效果在页面上是没有区别的(除非是输出到?pre或xmp?元素内)。Trackback:

    http://tb.blog.csdn.net/TrackBack.aspx?PostId=1472426

    二、document.write()向指定位置写html

    页面初始化时可以正确写在select框内

    但调用时就写在控件外了

    ，不知道document.write()能否想改变innerHTML或outerHTML来动态写HTML?以及写的HTML要用来显示该如何处理？

    如下：

    function creatOption(){

    for(i=0;i<5;i++)

    document.write("

    value='"+i+"'>"+i+"

    ");

    }

    function openWrite(){

    var win=window.open();

    win.document.write("Line1");

    win.document.write("Line1");

    win.document.write("

    value='1234567890' />");

    win.document.writeln("Line1");

    win.document.writeln("Line2");

    }

    name="myselect">

    creatOption();

    οnclick="openWrite()"/>

    收起
    展开全文

  • 详解Document.write()方法

     2021-03-20 08:19:48
    document.write()方法可以用在两个方面：1.页面载入过程中，用脚本加入新的页面内容。2.用延时脚本创建本窗口或新窗口的内容。该方法需要一个字符串参数，它是写到窗口或框架中的HTML内容。这些字符串参数可以是变量...

    document.write()方法可以用在两个方面：

    1.页面载入过程中，用脚本加入新的页面内容。

    2.用延时脚本创建本窗口或新窗口的内容。

    该方法需要一个字符串参数，它是写到窗口或框架中的HTML内容。这些字符串参数可以是变量或值为字符串的表达式，写入的内容常常包括HTML标记语言。如下面代码，教务系统框架载入子页

    Html代码

    //加载效果图标

    loading

    //调用JS的OutputIFrame函数，形成框架

    Index.OutputIframe();

    js代码

    //输出框架

    Index.OutputIframe = function () {

    var scrolling = $.isIE6 == true ? 'yes' : 'auto';

    document.write('');

    };

    在载入页面后，浏览器输出流自动关闭。在此之后，任何一个对当前页面进行操作的document.write()方法将打开—个新的输出流，它将清除当前页面内容(包括源文档的任何变量或值)。因此，假如希望用脚本生成的HTML替换当前页面，就必须把HTML内容连接起来赋给一个变量，使用一个document.write()方法完成写操作。

    关于document.write()方法还有一点要说明的是它的相关方法document.close()。脚本向窗口(不管是本窗口或其他窗口)写完内容后，必须关闭输出流。在延时脚本的最后一个document.write()方法后面，必须确保含有document.close()方法，不这样做就不能显示图像和表单。并且，任何后面调用的document.write()方法只会把内容追加到页面后，而不会清除现有内容来写入新值。

    收起
    展开全文

  • 全面理解document.write()

     千次阅读 2020-11-19 10:40:17
    W3C 标准 ...如果document.write()在DOMContentLoaded或load事件的回调函数中，当文档加载完成，则会先清空文档（自动调用document.open()），再把参数写入body内容的开头。 在异步引入的js和DOMCo

    W3C 标准

    WHATWG: write()

    定义和用法

    文档节点的write()方法用于写入文档内容，可以传多个参数，写入的字符串会按HTML解析。

    • 语法：document.write()
    • 参数：字符串，可以传多个字符串参数
    • 返回值：undefined

    注意事项

    1. 如果document.write()在DOMContentLoaded或load事件的回调函数中，当文档加载完成，则会先清空文档（自动调用document.open()），再把参数写入body内容的开头。

    2. 在异步引入的js和DOMContentLoaded或load事件的回调函数中运行document.write()，运行完后，最好手动关闭文档写入（document.close()）。

    示例代码

    在head中运行document.write()，则参数写在body内容的开头。

    <!-- 运行前 -->
<head>
    <script>
        document.write('<p>test</p>');
    </script>
</head>
<body>
    <h2>write()</h2>
</body>

<!-- 运行后 -->
<head>
    <script>
        document.write('<p>test</p>');
    </script>
</head>
<body>
    <p>test</p>
    <h2>write()</h2>
</body>

    在body中运行document.write()，则参数写在运行的script标签后面

    <!-- 运行前 -->
<div>
    <script>
        document.write('<p>test</p>');
    </script>
    <p>content</p>
</div>

<!-- 运行后 -->
<div>
    <script>
        document.write('<p>test</p>');
    </script>
    <p>test</p>
    <p>content</p>
</div>

    同步引用外部js，参数也是写在运行的script标签后面

    // syncWrite.js
document.write('<p>test</p>');

    <!-- syncWrite.html -->
<!-- 运行前 -->
<body>
    <script src="syncWrite.js"></script>
    <p>content</p>
</body>

<!-- 运行后 -->
<body>
    <script src="syncWrite.js"></script>
    <p>test</p>
    <p>content</p>
</body>

    异步引用外部js，必须先运行document.open()清空文档，然后才能运行document.write()，参数写在body内容的开头。
    如果不先运行document.open()，直接运行document.write()，则无效且Chrome有如下提示：

    // asyncWrite.js
document.open();
document.write('<p>test</p>');
document.close();

    <!-- asyncWrite.html -->
<!-- 运行前 -->
<body>
    <script src="asyncWrite.js" async></script>
</body>

<!-- 运行后 -->
<body>
    <p>test</p>
</body>

    如果document.write()在DOMContentLoaded或load事件的回调函数中，则不管是在head中，body中，同步的js中，异步的js中，都会先清空文档（自动调用document.open()），然后运行document.write()，参数写在body内容的开头

    <!-- 运行前 -->
<body>
    <script>
        window.addEventListener('load', function () {
            document.write('<p>test</p>');
            document.close();
        }, false);
    </script>
</body>

<!-- 运行后 -->
<body>
    <p>test</p>
</body>

    document.write()也能写入含有script标签的字符串，但是需要转义。写入的script标签中的内容会正常运行。

    <!-- 运行前 -->
<script>
    document.write('<script>document.write("<p>test</p>");<\/script>');
</script>

<!-- 运行后 -->
<script>
    document.write('<script>document.write("<p>test</p>");<\/script>');
</script>
<script>document.write("<p>test</p>");</script>
<p>test</p>

    document.write()可以传入多个参数。

    <!-- 运行前 -->
<body>
    <script>
        document.write('<h2>multiArgument</h2>','<p>test</p>');
    </script>
</body>

<!-- 运行后 -->
<body>
    <script>
        document.write('<h2>multiArgument</h2>','<p>test</p>');
    </script>
    <h2>multiArgument</h2>
    <p>test</p>
</body>
    收起
    展开全文

  • document.write详解

     万次阅读 2018-01-07 01:22:30
    原文地址：document.write的用处! document.write是JavaScript中对document.open所开启的文档流(document stream操作的API方法，它能够直接在文档流中写入字符串，一旦文档流已经关闭，那document.write就会重新...
    收起
    javascript

  • document.write script不生效用document.createElement替代

     2020-07-10 08:11:45
    最近遇到一个document.write("<script type='text/javascript' src='test.js'></script>")在ie浏览器不生效的问题，可用document.createElement("script");解决 var s = document.createElement(...
    收起

  • JavaScript用document.write()输出换行

     万次阅读 多人点赞 2020-11-10 21:21:31
    当我们想用document.write()输出换行时，可能会第一时间想到加"\n"，但是其实不能达到我们的想要效果，只会得到一个空格的效果。 正确的方法是使用：</br> 样例代码： <!DOCTYPE html> <html> &...
    收起
    javascript html 换行

  • JavaScript之document.write()、console.log()

     2021-06-07 10:48:11
    一、document.write() document.write()一个最基本的JavaScript命令是document.write。这个命令简单地打印指定的文本内容到页面上。为了逐字打印文本，在打印的文本字符串加上单引号。
    收起
    html javascript

  • 为什么要避免使用document.write，尤其是脚本注入

     2020-08-25 14:47:28
    Web 性能测试工具比如 Google Page Speed 或者 Dareboost 已经指出：使用 document.write 注入一段脚本会引起严重的网站加载耗时问题。让我们再次讨论这个话题，因为 Chrome 的下次更新将不再允许这样的脚本注入方式...
    收起

  • document.write()详解

     千次阅读 2020-10-19 20:49:37
    一、document.write()运行原理 首先我们先了解一下这条...它能够直接砸文档流中写入字符串，一旦文档流已经关闭，那么 document.write()就会重新运用document.open()打开新的文档流并写入，此时原来的文档流会被清.
    收起

  • document.write()用法

     千次阅读 2022-02-22 15:05:41
    1.document.open() 功能：打开一个新文档，即打开一个流，并...注1：open()方法将擦除当前HTML文档的内容，开始一个新的文档，新文档用write()方法或writeln()方法编写。 注2：调用open()方法打开一个新文档并且用wri
    收起
    javascript

  • document.write()和innerHTML的区别

     千次阅读 2020-07-19 18:46:13
    document.write()和innerHTML是JavaScript的显示方式 1.inner HTML 对于inner HTML，w3c给出的解释是： inner HTML可以写入（改变）HTML元素内容 2.document.write（) 对于document.write（），w3c给出的解释是 ...
    收起
    javascript

  • JavaScript 中document.write() 详细用法介绍

     千次阅读 2020-06-19 19:32:39
    document.write() 用法 在JavaScript中document.write()函数可以向文档写入HTML表达式或JavaScript代码，用法“document.write(exp1,exp2,exp3,…)”，该函数可接受任何多个参数，并将其写入文档中。 document.write...
    收起
    javascript css vue.js html

  • document.write()使用时的注意事项

     2020-08-03 13:39:06
    1.默认不会换行 可以用+号，自己换行 2.在HTML文档加载完成后，使用document.write()输出将会覆盖原有所有HTML； <html> <head> <... document.write("document方法") </script&
    收起

  • document.write的用处!

     万次阅读 多人点赞 2016-08-09 10:52:00
    document.write是JavaScript中对document.open所开启的文档流(document stream操作的API方法，它能够直接在文档流中写入字符串，一旦文档流已经关闭，那document.write就会重新利用document.open打开新的文档流并...
    收起
    javascript

  • document .write( )输出内容

     千次阅读 2020-04-09 19:55:34
    document.write() 可用于直接向 HTML 输出流写内容。简单的说就是直接在网页中输出内容。... document.write("I love JavaScript！"); //内容用""括起来，""里的内容直接输出。 </script> 第...
    收起
    javascript

  • js基础之-- 修改通过document.write写入的变量样式。如颜色、字体大小等。

     千次阅读 2021-06-09 19:58:43
    首先写出正常的 var name = prompt("请输入你的名字", "游客"); if (name == "") { document.write("欢迎你，亲爱的游客"); } else { document.write('欢迎你，亲爱的' + name); }
    收起
    javascript

  • java script document.write()表格制作

     2020-05-25 20:23:55
    <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <title>...script...
    收起

  • document.writeln()与document.write()

     2018-04-25 23:07:37
    document.writeln()效果 document.write()输出之后回车
    收起

  • document.write用法与清空原来的内容原因

     千次阅读 2017-12-20 11:55:26
    [JavaScript] 纯文本查看 复制代码运行代码1document.write(exp1,exp2,exp3,....) 参数解析： （1）.expN：可以是一个或者多个参数，如果是多个参数，那么按照顺序写入文档。 浏览器支持: （1）.IE浏览...
    收起

  • 【JavaScript】document.write()的用法和清空的原因

     千次阅读 2017-12-02 23:34:10
    可能很多朋友都遇到过这样的情况，那就是使用document.write()函数向网页中写内容的时候，会把文档中的原来的内容给清空，这一点对于初学者来说算是一个困扰，下面就介绍一下为什么会出现这种情况，当然也就知道如何...
    收起
    javascript

  • document. write会清空页面原因分析

     2018-12-25 12:19:34
    当使用document.write的时候，如果当前的文档流已经被关闭，那就会新创建一个文档流执行document.write语句，同时也就覆盖了之前的页面。onload是在文档加载完毕后再去执行的，文档流就已经是加载完毕的了，而按钮...
    收起
    JavaScript

  • document.write()在JavaScript中怎样JSP调用

     2009-04-01 13:03:05
    document.write()在JavaScript中怎样JSP调用
    收起

  • document.write的问题

     千次阅读 2017-02-21 15:55:11
    简介将输出流写入到网页的能力就是document.write，还有open() close() writeln()。方法都是接受一个字符串参数，即要写入到输出流中的文本。wirte原样写入，writeln在字符串末尾添加换行符。页面被加载过程中，可以...
    收起

  • 学习笔记：JS使用document.write()在页面上显示红色字体

     2021-01-25 14:00:54
    使用document.write()在页面上显示红色的“开启JavaScript学习之旅”
    收起

  • JavaScript document.write 与 document.writeln 的区别

     万次阅读 2017-01-29 22:38:50
    document.write() 和 document.writeln 都是JavaScript向客户端写入的方法，writeln是以行方式输出的，但并不是指页面实际效果中的换行，两种方法在查看源代码时才看得出区别，除非是输出到pre或code（xmp也可以，但...
    收起
    javascript

  • document.write 页面空白

     2017-12-13 19:04:31
    document.write 后空白的解决办法
    收起
    html

  • 动态调用包含document.write的js文件，动态调用外部js文件时，文件中alert起作用 document.write不起作用

     千次阅读 2016-10-28 11:32:28
    问题代码： function test(){ var script=document.createElement('script'); script.src='js/write.js'; var dd=document.getElementById('dd');...通过test函数调用write.js文件 内容主要是document.writ
    收起

  • Document.write()的使用

     千次阅读 2018-10-12 21:12:21
    使用document.write()仅仅是向文本档输入想要写的内容 注：如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖 例如： &amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;gt; &amp;...
    收起

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 332,698
精华内容 133,079
热门标签
关键字：

document.write

友情链接： IEEEXplore(3).zip