document.writeln-优快云博客

本文探讨了使用document.writeln时遇到的问题，即为何只输出第一个选项，并提供了解决方案：通过在一个新窗口中写入所有选项来避免内容被覆盖。此外，还介绍了在document.write中正确输出<script>标签的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

(1)document.writeln问题
<html>
<head>
<script type="text/javascript">
function getOptions()
{
var x=document.getElementById("mySelect");
for (i=0;i<x.length;i++)
{

document.write(x.options[i].text)
document.write("<br />")

}
}
</script>
</head>
<body>
<form>
Select your favorite fruit:
<select id="mySelect">
<option>Apple</option>
<option>Orange</option>
<option>Pineapple</option>
<option>Banana</option>
</select>
<br /><br />
<input type="button" onclick="getOptions()"
value="Output all options">
</form>
</body>
</html>
[color=red]Q:为什么只显示Apple?能在自画面上四个一起出现吗[/color]

[color=red]A: if(i=0)document.writeln调用与文档中的其他HTML元素使用的不是同一个document,自动打开一个新的document对象进行写入,从而覆盖初始窗口中的内容,但是新的窗口中没有 for (i=0;i<x.length;i++)
{

document.write(x.options[i].text)
document.write("<br />")

}代码,无法再次打开一个新的document对象进行写入,也就是说,一个窗口只能自动打开一个新的document,不可以是多个,从这个例子可以看出
[/color]
(2)这样做能全部出现
<html>
<head>
<script type="text/javascript">
function getOptions()
{
var x=document.getElementById("mySelect");
var iwin = window.open("", "_blank");
for (i=0;i<x.length;i++)
{

iwin.document.write(x.options[i].text)
iwin.document.write("<br />")

}
}
</script>
</head>
<body>
<form>
Select your favorite fruit:
<select id="mySelect">
<option>Apple</option>
<option>Orange</option>
<option>Pineapple</option>
<option>Banana</option>
</select>
<br /><br />
<input type="button" onclick="getOptions()"
value="Output all options">
</form>
</body>
</html>

另外还有小的知识点,当在document.writeln中要输入</script>时候注意:
document.write("<scr"+"ipt src=add.jsp></scr"+"ipt>");
[color=red] 该段确认ing
eval("<scri" + "pt src=add.jsp></scri" + "pt>");

使用 document.write 输出 HTML 标签（尤其是 <script> 标签）的时候，需要将闭合标签进行转义，否则浏览器在匹配闭合标签时发生错误。这样写是没问题的：

document.write('<\/script>');
document.write('<\/body>');
document.write('<\/html>');

如果你的 document.write 是在一个 .js 文件中，则不需要这样做。

document.write("<script src=http://...><\/script>");
// 加上转义符就搞定了
[/color]

document.writeln("<div align=\"right\" id=\"so\"> <a href=\"http:\/\/www.amazon.cn\/channel\/book.asp?source=35655109\" target=\"_blank\">网易<\/a><\/div>")