JavaScript を使用して Form フォーム要素を動的に追加する方法の例-jsチュートリアル-php.cn

JavaScript を使用して Form フォーム要素を動的に追加する方法の例

韦小宝

リリース： 2018-01-22 09:57:28

オリジナル

3269 人が閲覧しました

この記事では、主にフォーム要素を動的に追加するための 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(&#39;add_jietu&#39;);
  var nodeFather = add_jietu.parentNode;
  var node_clone = add_jietu.cloneNode();
  content = add_jietu.innerHTML;
  node_clone.removeAttribute(&#39;id&#39;);
  node_clone.innerHTML = content;
  nodeFather.appendChild(node_clone);
}
</script>

ログイン後にコピー

注:

1. js の 6 行目では、クローンノードには html が使用されていないため、9 行目のコードを埋める必要があります。コンテンツ

2. このメソッドによって生成される変数タイプは「ノードタイプ」なので、clone関数を使用します。これは、appendChild()関数のパラメータとして使用できます

3. nextSiblingとlastChildによって取得される変数。ノードのプロパティは Text タイプです (Chrome デバッグウィンドウに表示される)