javascript - 使用javascript将div添加到页面

Question

我有一个检查 navigator.platform 的 javascript，如果是 linux armv6i (raspberry pi)，我需要它来向 HTML 页面添加两个 div(屏幕键盘)

这是我的 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.write 不正确。我想我需要做一些类型的 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