爲什麼這個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循環會重寫整個頁面

回答

相關問題