3

私は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 属性を渡す適切な方法は何ですか?

4

2 に答える 2

2

className=の代わりに使用しclass=ます。したがって、次のようになります。

btnDel.className="btn btn-primary";

これは、このclass単語が JavaScript の予約語であるためです。

于 2013-07-22T11:55:22.903 に答える
2

クリックの場合

addEventListenerこれを HTML に出力しようとする代わりに、メソッドを使用して純粋な Javascript でこれを実行してみませんか?

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

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

    }, false);

このアプローチは目立たない Javascript として知られており、Web サイトを開発する際には実際に非常に望ましい属性です。

クラスのために

前述のように、classNameand notを使用しclassます。

class通常、 as new class の宣言に先行し、 variable を呼び出すことができないのと同じように、属性のように使用することはできませんvar。

于 2013-07-22T11:58:08.510 に答える