为什么这个JS循环会重写整个页面

我有这个网页有一个循环来写出一堆列表元素。加载时，for循环运行56次，并使用CSS样式和全部。为什么这个JS循环会重写整个页面

但是，我有输入按钮，运行loops()函数运行do代码块，这基本上重新加载页面与新列表，并没有我的其他html出现。

我该如何制作一个loops()来添加我的列表元素并增加列表而不是重新加载整个文档？

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Document</title> 
<link rel="stylesheet" href="jscss.css"> 
<script src="js.js"></script> 
</head> 
<body> 
    <script> 
    function loops(){ 
    var i= 0; 
do{ 
    document.write("<li id='list'>"+i+"</li>"); 
    i++; 
    }while(i < 100); 
    } 
    document.write("Hello World"); 
    document.write("<br>"); 
    document.write("<input id='string' type='text'>"); 
    document.write("<input onClick='loops()' type='button' value='Submit'>"); 
document.write("<ul id='list'>"); 
for (i = 0; i <= 56; i++) { 
    document.write("<li>"+i+"</li>"); 
}; 
document.write("</ul>"); 
    </script>

来源

2015-10-06 Barrard

因为在文件加载后调用document.write将清除文件。

注：为文件撰写写入文件流，要求封闭（加载）文件文件撰写自动调用 document.open这将清除文件。

所以，当你点击按钮时，文档已经加载，所以它已被清除。

可以使用的appendChild（）或新的内容添加到innerHTML的父元素

function loops() { 
 
    var i = 0, 
 
    lst = document.getElementById('list'), 
 
    html = ''; 
 
    do { 
 
    html += "<li>" + i + "</li>"; 
 
    } while (++i < 100); 
 
    lst.innerHTML += html; 
 
} 
 
document.write("Hello World"); 
 
document.write("<br>"); 
 
document.write("<input id='string' type='text'>"); 
 
document.write("<input onClick='loops()' type='button' value='Submit'>"); 
 
document.write("<ul id='list'>"); 
 
for (i = 0; i <= 56; i++) { 
 
    document.write("<li>" + i + "</li>"); 
 
}; 
 
document.write("</ul>");

的

来源

2015-10-06 04:18:09

由于您使用document.write()不使用document.write()。 Google innerHTML。

来源

2015-10-06 04:15:52 slebetman

为什么这个JS循环会重写整个页面

回答

相关问题