ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript を使用して Form フォーム要素を動的に追加する方法の例
この記事では、主にフォーム要素を動的に追加するための JavaScript メソッドを紹介し、JavaScript フォーム要素の操作の使用法と関連関数を Notes に興味のある方は参照してください。記事!
以前にも似たような記事を書いたことがありますが (例: JavaScript で実装されたフォーム要素の動的追加、入力、ボタンなど)、今回は比較的初歩的なものに思えます。高度でシンプルな
シナリオを作成しましょう: ゲームのスクリーンショットをアップロードします。背景、スクリーンショットの数 よくわからないので、この効果を実現するには入力ノードを動的に追加する方法を使用してください
使用される主な関数は次のとおりです:
document.getElementById();
objNode。 parentNode;
objNode .cloneNode();
objNode.removeAttribute();
objNode.innerHTML();
objNode.appendChild();
html:
<p class="well well-sm"> <p class="form-group"> <label class="form-label">游戏截图:</label> <input type="file" name="jietu[]" class="form-input"> <span class="form-tip" onclick="add_jietu()"><font color="#428bca">点击添加游戏截图</font></span> </p> <p class="form-group" id="add_jietu"> <label class="form-label">游戏截图:</label> <input type="file" name="jietu[]" class="form-input"> </p> </p>
javascript:
<script type="text/javascript"> function add_jietu() { var add_jietu = document.getElementById('add_jietu'); var nodeFather = add_jietu.parentNode; var node_clone = add_jietu.cloneNode(); content = add_jietu.innerHTML; node_clone.removeAttribute('id'); node_clone.innerHTML = content; nodeFather.appendChild(node_clone); } </script>
注:
1. js の 6 行目では、クローンノードには html が使用されていないため、9 行目のコードを埋める必要があります。コンテンツ
2. このメソッドによって生成される変数タイプは「ノードタイプ」なので、clone関数を使用します。これは、appendChild()関数のパラメータとして使用できます
3. nextSiblingとlastChildによって取得される変数。ノードのプロパティは Text タイプです (Chrome デバッグ ウィンドウに表示される)
関連する推奨事項:
JavaScript ブラウザーのユーザー エージェント検出スクリプト メソッドの詳細な説明
3 つの JavaScript シミュレーション実装のカプセル化メソッドとメソッドの書き方
JavaScriptの自己実行関数とjQueryの拡張メソッドについて詳しく解説
以上がJavaScript を使用して Form フォーム要素を動的に追加する方法の例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。