Generate text field with specific class

Question

In my HTML and JavaScript code below, I wish to add text field and radio button dynamically when I click the button. This is working properly. But I also want that the new text field generated should have the same font size and appearance as the one above it, i.e. i want to have the same class.

Here is the HTML:

<input type="radio" name="choices"  value="o1"/>
<input type="text" name="o1" id="o1" class="inputtype"/>
<span class="file-wrapper">
<input type="file" name="o1_i" />
<span class="button">Choose an file</span>
</span>
<div id="responce"></div>

And the JavaScript:

var div = document.getElementById("responce");
var radio = document.createElement("input");
            radio.type = "radio";
            radio.name = "choices";
            radio.value = "o" + countBox;
            div.appendChild(radio);

var text = document.createElement("input");
            text.type = "text";
            text.id = "o" + countBox;
            text.name ="o" + countBox;
            div.appendChild(text);

var upload = document.createElement("input")
            upload.type = "file";
            upload.name= "o" + countBox + "_i";
            div.appendChild(upload);

Answer 1

Just the set the className property in the same way that you're setting the name, type and ID:

text.className = "inputtype";

Do the same for the browse button:

upload.className = "someclass";

For multiple classes, separate them with a space. Note that className overwrites the whole class list.