use javascript to add div to page

Issue

I have a javascript that checks for navigator.platform and if linux armv6i (raspberry pi) I need it to add two divs (onscreen keypads) to the HTML page

this is my javascript logic:

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"}};

}

This is one of the divs I need to add, the other is the same just keypad2 and 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>

I know document.write is not correct. I think I need to do some type of document.createElement. and element.appendchild(document.createTextNode... but I am not sure and what I tried works less than document.write.

I could just have document write "write" the complete HTML page but that seams like using an ax to do heart surgery.

thanks for any help you can provide.

Solution

Use document.body.appendChild(newElem)

function systemdetect() {
  systemname = navigator.platform;
  const 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

If you want to add the large amount of inputs inside the div instead, use something like this:

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

Demo

Note that if the inputs could be insecure, you should santize the variable before using innerHTML.

Answered By - Zach Saucier