我可以用什麼來代替document.write函數來程序化生成html？

Question

所以感謝堆棧溢出，我確定document.write每次運行時都會破壞我的網頁/程序。我經常看到答案是使用innerhtml和document.getElementById，但是，在下面的情況下，我無法圍繞下面將如何使用它的過程，看到如何分配一個id來替換它。我想要下面的整個事情在單個div中重繪。它所做的就是取該數組，垂直吐出，並突出顯示與變量「速度」相匹配的數字。當您重新運行speedcounter功能時，該變量會發生變化，因此突出顯示的數字也會發生變化。

有沒有更好的方法來做到這一點？

並感謝您的期待。

function speedcounter() { 

var spx; 
var speed = 3; 
var sp=["0","3","4","4","4","5","6","7","8"]; 

document.write(' <h2>Speed</h2></br>'); 
document.write('<input type="button" onclick="addspeed();" value="+"><br />'); 

for (spx=8; spx>=0; spx--) { 
    if (spx == speed) { 
     document.write('<font color=#00FF00>'); 
    } 
    document.write(sp[spx]); 
    document.write('<font color=#000000><br />'); 
    } 
document.write ('<input type="button" onclick="remspeed();" value="-">');  
} 

Answer 1

如果您不想因爲任何原因使用jQuery，以下是僅限javascript的解決方案。

我創建一個div

<div id="speed"></div>​ 

然後用document.getElementById()和innerHTML到HTML添加到它。我保留你的代碼結構來說明它將如何完成。我使用+=添加到div中現有的HTML。在函數的頂部，我清除它。如果不這樣做，每次調用函數時都會得到多個輸出副本。

function speedcounter() { 
document.getElementById('speed').innerHTML = ""; 
var spx; 
var speed = 3; 
var sp=["0","3","4","4","4","5","6","7","8"]; 

document.getElementById('speed').innerHTML += '<h2>Speed</h2></br>'; 
document.getElementById('speed').innerHTML += '<input type="button" onclick="addspeed();" value="+"><br />'; 

for (spx=8; spx>=0; spx--) { 
    if (spx == speed) { 
     document.getElementById('speed').innerHTML += '<span style="color:#00FF00">' + sp[spx] + '</span><br />'; 
    } else { 
     document.getElementById('speed').innerHTML += sp[spx] + "<br />"; 
    } 
} 
document.getElementById('speed').innerHTML += '<input type="button" onclick="remspeed();" value="-">';  
} 

speedcounter(); 

我也刪除您font標籤，並用span和內嵌CSS設置顏色替換它。

Demo

Answer 2

任何阻止你使用jQuery的東西？

以下鏈接使用jquery創建/附加dom元素。 How to create a DOM node as an object?

Answer 3

您可以修改直接被人體的innerHTML屬性：你每次修改innerHTML

var body = document.getElementsByTagName('body')[0]; 
body.innerHTML += '<h2>Speed</h2></br>'; 

http://jsfiddle.net/YB8HU/

只要記住，瀏覽器會重新處理佈局，所以考慮將將HTML字符串轉換爲變量，然後將其添加到腳本結尾的正文中。