javascript - 在 javascript 中使用 HTML 属性

Question

我是 JavaScript 的初学者。我正在尝试在用 php 生成的页面上添加一个函数以使用 javascript 生成新的表单元素。

代码用于创建新的 <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 中，不如使用 addEventListener 方法在纯 Javascript 中执行此操作？

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

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

    }, false);

这种方法被称为 non-obtrusive Javascript，在开发网站时它实际上是一个非常理想的属性。

为了类(class)

如前所述，使用 className 而不是 class。

class 通常在作为新类的声明之前，不能像属性一样使用，就像不能调用变量 var .