use javascript to add div to page

Question

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.

would a solution Jquery work? If yes then you can do $("#id").append("Your div") — tgpatel
– tgpatel, Commented Jan 16, 2014 at 23:29
i am using webpy and i do not know how to get jquary working with it or how to use jquary. i am hopping for a Javascript HTML solution. save learning jquary for another day. — Jay42
– Jay42, Commented Jan 16, 2014 at 23:39

Zach Saucier · Accepted Answer · 2024-01-14 04:20:50Z

11

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.

edited Jan 14, 2024 at 4:20

answered Jan 16, 2014 at 23:34

Zach Saucier

26.2k12 gold badges101 silver badges161 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jay42 Over a year ago

I do need the "large" amount if inputs (15 ish) but i cannot figure out how to get the Keypad1 code to work, any chance you could flush that out a little more for me. specifically how to add multiple inputs (2 or 3 should give me the idea) and how it would fit into the javacript, (everything under the if statements or before like var test?) thanks

Akinkunle Allen · Accepted Answer · 2014-01-17 00:55:54Z

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

thank you for your input. i love how readable your code is. when i have a chance to 'edit' my code i am going to try and implement this as it is easily readable.

Collectives™ on Stack Overflow

use javascript to add div to page

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related