使用JavaScript添加div來

Question

頁

我有對navigator.platform，如果Linux的armv6i（樹莓PI）檢查我需要它兩個div（屏幕鍵盤）添加到HTML頁面

這是一個JavaScript我JavaScript邏輯：

function systemdetect() 
{ 
systemname=navigator.platform; 

if (systemname.indexOf("Linux armv6l")!=-1) { 
    systemname="pi" 
    document.write("<p>this is a test.</P>") 
    } 

else {if (systemname.indexOf("Win32")!=-1) { 
    systemname="MS 32" 
    document.write("<p>this is a Win32 tes.</P>") 

} 

else {systemname="N/A"}}; 

} 

這是我需要添加的div之一，另一種是相同的只是keypad2和NUM2

<div id="keypad" style=" display:none;" > 
<input type="button" value="7" onclick="number('num').value+=7;"class="number"/> 
<input type="button" value="8" onclick="number('num').value+=8;" class="number"/> 
<input type="button" value="9" onclick="number('num').value+=9;" class="number"/><br/> 
<input type="button" value="4" onclick="number('num').value+=4;" class="number"/> 
<input type="button" value="5" onclick="number('num').value+=5;" class="number"/> 
<input type="button" value="6" onclick="number('num').value+=6;" class="number"/><br/> 
<input type="button" value="1" onclick="number('num').value+=1;" class="number"/> 
<input type="button" value="2" onclick="number('num').value+=2;" class="number"/> 
<input type="button" value="3" onclick="number('num').value+=3;" class="number"/><br/> 
<input type="button" value="X" onclick="number('keypad').style.display='none'"class="number"/> 
<input type="button" value="0" onclick="number('num').value+=0;" class="number"/> 
<input type="button" value="&larr;" 
onclick="number('num').value=number('num').value.substr(0,number('num').value.length-1);" class="number"/> 
</div> 

我知道文件撰寫是不正確的。我想我需要做一些類型的document.createElement。和element.appendchild（document.createTextNode ...但我不知道，我試過的東西比document.write少。

我可以讓文檔寫「寫」完整的HTML頁面，但接縫像使用斧頭做心臟手術。

感謝您的幫助，您可以提供。

Answer 1

使用document.body.appendChild(newElem)

function systemdetect() { 
    systemname = navigator.platform; 
    var test = document.createElement("p"); 
    if (systemname.indexOf("Linux armv6l") != -1) { 
    systemname = "pi"; 
    test.innerHTML = "this is a test."; 
    } 
    else if (systemname.indexOf("Win32") != -1) { 
    systemname = "MS 32"; 
    test.innerHTML = "this is a Win32 test."; 
    } 
    else { systemname="N/A"; } 
    if(test.innerHTML != "") document.body.append(test); 
} 

Demo

如果要大量的投入增加了DIV中，而不是使用像這樣

var keypad1 = document.createElement("div"); 
keypad1.innerHTML = "...Your inputs' HTML here..."; 
document.body.appendChild(keypad1); 

Demo

Answer 2

var keypad = document.createElement("div"); 

//wrap the whole code for the input fields into an array, it will be converted into a string later 
var inputFields = [<input type="button" value="7" onclick="number('num').value+=7;"class="number"/> 
<input type="button" value="8" onclick="number('num').value+=8;" class="number"/> 
<input type="button" value="9" onclick="number('num').value+=9;" class="number"/><br/> 
<input type="button" value="4" onclick="number('num').value+=4;" class="number"/> 
<input type="button" value="5" onclick="number('num').value+=5;" class="number"/> 
<input type="button" value="6" onclick="number('num').value+=6;" class="number"/><br/> 
<input type="button" value="1" onclick="number('num').value+=1;" class="number"/> 
<input type="button" value="2" onclick="number('num').value+=2;" class="number"/> 
<input type="button" value="3" onclick="number('num').value+=3;" class="number"/><br/> 
<input type="button" value="X" onclick="number('keypad').style.display='none'"class="number"/> 
<input type="button" value="0" onclick="number('num').value+=0;" class="number"/> 
<input type="button" value="&larr;" 
onclick="number('num').value=number('num').value.substr(0,number('num').value.length-1);" class="number"/>]; 

/*The join() method converts all array elements to strings and concatenates them. 
join() takes optional character or string as argument that is used to separate one element of the array from the next in the returned string. If this argument is omitted, a comma is used.*/ 

keypad.innerHTML = inputFields.join(""); 

//add the created div to the body 
document.body.appendChild(keypad);