javascript_javascript スキルで実装された入力、ボタンなどのフォーム要素の動的追加 (appendChild)

小規模なシステムを作成する場合、フォーム要素を動的に追加する必要があるため、このチュートリアルは私自身の実装方法に従って作成しました。
多くの Web サイトで同様の効果が見られたと思います。
1. ドキュメントを使用します。 createElement メソッドで入力要素を作成します。

コードをコピー コードは次のとおりです。

var newInput = document.createElement("input ");

2. 名前、タイプなどの関連する属性を設定します。

コードをコピー コードは次のとおりです:

newInput.type=mytype;

3. appendChild メソッドを使用します。タグのコンテンツに要素を追加します。

コードをコピーします コードは次のとおりです。

TemO.appendChild(newInput); >

Javascript コア コード:

コードをコピー コードは次のとおりです:

<スクリプト言語 ="javascript">

function AddElement(mytype){
var mytype,TemO=document.getElementById("add");
var newInput = document.createElement("input") ");
newInput.type=mytype;
newInput.name="input1";
TemO.appendChild(newInput);
var newline= document.createElement("br");//改行機能のBRタグを作成しましょう！
TemO.appendChild(newline);
}

フォーム要素を動的に追加する <title> </title> <form action="" method="get" name="frm"> <div id="add"> <input type="text" name="textfield"> </div> </form> <input name="" type="button" value="新建文本框" onclick="AddElement('text')"> <input name="" type="button" value="新建复选框" onclick="AddElement('checkbox')"> <input name="" type="button" value="新建单选框" onclick="AddElement('radio')"> <input name="" type="button" value="新建文件域" onclick="AddElement('file')"> <input name="" type="button" value="新建密码框" onclick="AddElement('password')"> <input name="" type="button" value="新建提交按钮" onclick="AddElement('submit')"> <input name="" type="button" value="新建恢复按钮" onclick="AddElement('reset')">
[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、 を実行するために更新する必要があります]