Использование атрибутов HTML в javascript

Question

Я новичок в javascript. Я пытаюсь добавить функцию для создания новых элементов формы, используя javascript, на странице, созданной в php.

Код работает при создании новых элементов <tr>, <td>, <input type="text"> html. Однако, когда я пытаюсь создавать кнопки с использованием стилей css, я нахожу, что стили теряются из тегов.

if(document.createElement) 
var tr = document.createElement("tr"); 
var input = document.createElement("input"); 
// If NS is passed, should become NS[2] etc 
input.id = field+"["+count+"]"; 
input.name = field+"["+count+"]"; 
input.type = "text"; //Type of field - can be any valid input type like text,file,checkbox etc. 

var td=document.createElement("td"); 
var newContent = document.createTextNode("NS"); 
td.appendChild(newContent); 

tr.appendChild(td);  
td=document.createElement("td");   
td.appendChild(input); 
tr.appendChild(td);     

var btnDel=document.createElement("a"); 
btnDel.class="btn btn-primary"; 
btnDel.onclick = "addField(\'nameservers\',\'NS\',10);" ; 


var btnText=document.createElement("span"); 
btnText.class="btn-label"; 
btnText.innerHTML="Add"; 


btnDel.appendChild(btnText);   
td.appendChild(btnDel); 
tr.appendChild(td);   
field_area.appendChild(tr); 

} 

Полученный код показывает:

<a><span>Add</span> 
</a> 
</td> 

вместо того, что я ожидал:

<a onclick="addField('nameservers','NS',10);" class="btn btn-primary"> 
<span class="btn-label">Add  
</span> 
</a> 

Что я делаю неправильно? Каков правильный способ передачи всех атрибутов html с помощью скрипта?

Answer 1

Для по щелчку

Вместо того, чтобы пытаться вывести это в HTML, то почему бы не сделать это в чистом Javascript, используя метод addEventListener?

element.addEventListener('click', function() { 

    addField('nameservers','NS',10); 

    }, false); 

Этот подход известен как не навязчивая Javascript, и это на самом деле очень желательный атрибут при разработке веб-сайта.

Для класса

Как уже упоминалось, использовать className и не class.

class обычно предшествует объявлению как новый класс и не может использоваться как атрибут, так же, как вы не можете вызвать переменную var.

Answer 2

Использовать className= вместо class=. Так что это будет так:

btnDel.className="btn btn-primary"; 

Это происходит потому, что class слово зарезервированное слово в JavaScript.