Exemple de comment ajouter dynamiquement des éléments de formulaire Form à l'aide de JavaScript

Cet article présente principalement la méthode JavaScript d'ajout dynamique d'éléments de formulaire de formulaire. Il analyse l'utilisation des fonctions liées au fonctionnement des éléments de formulaire JavaScript et des Notes associées sur la base d'exemples. Les amis intéressés par JavaScript peuvent se référer à cet article !

J'ai déjà écrit des articles similaires (tels que : ajout dynamique d'éléments de formulaire, de boutons, etc. implémentés en javascript), mais maintenant cela semble relativement élémentaire, créons un

scénario : Nous devons télécharger des captures d'écran du jeu en arrière-plan, et le nombre de captures d'écran est incertain, nous utilisons donc la méthode d'ajout dynamique de nœuds d'entrée pour obtenir cet effet

Les principales fonctions utilisées sont :

document.getElementById();

objNode.parentNode;

objNode.cloneNode() ;

objNode.removeAtrribute();

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>

Remarque :

1 La 6ème ligne de js utilise la fonction "clone node". la 9ème ligne de code est donc nécessaire pour remplir le contenu

2. Utilisez la fonction de clonage Comme le type de variable généré par cette méthode est "type de nœud", il peut être utilisé comme paramètre dans appendChild. ()

3. Les variables obtenues par les attributs nextSibling et lastChild du nœud sont de type texte (vu dans la fenêtre de débogage de Chrome)

Recommandations associées :

Explication détaillée de la méthode de script de détection d'agent utilisateur du navigateur Javascript

Partage des différences entre trois méthodes d'encapsulation et d'écriture de mise en œuvre de simulation JavaScript

Détaillé explication des fonctions auto-exécutables JavaScript et des méthodes d'extension jQuery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!