Сгенерировать текстовое поле с определенным классом

Question

В моем HTML и JavaScript-коде ниже я хочу добавить текстовое поле и радио-кнопку динамически, когда я нажимаю кнопку. Это работает правильно. Но я также хочу, чтобы новое текстовое поле сгенерировало одинаковый размер и внешний вид шрифта, как тот, который над ним, т. Е. Я хочу иметь один и тот же класс.

Вот 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> 

И 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

Просто Установите className свойство таким же образом, что вы устанавливаете имя, тип и ID:

text.className = "inputtype"; 

Сделайте то же самое для кнопки обзора:

upload.className = "someclass"; 

Для нескольких классов разделите их пробелом. Обратите внимание, что className перезаписывает весь список классов.

Answer 2

Если вы не хотите добавлять класс с javascript для каждого добавляемого вами элемента. Просто настройте элемент <input> с простым css: #myform input[type=text] при условии, что у вас есть form-tag или какой-либо родительский элемент для цели.