Question

我有一个检查navigator.platform的javascript，如果linux armv6i（raspberry pi）我需要它将两个div（屏幕键盘）添加到HTML页面

这是我的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之一，另一个只是keyboard2和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

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);

使用javascript将div添加到页面

2 个答案: