So erstellen Sie <input type = “text” /> dynamisch

Ich möchte einen Text vom Typ Eingabe in meinem Webformular dynamisch erstellen. Insbesondere habe ich ein Textfeld, in das der Benutzer die Anzahl der gewünschten Textfelder eingibt. Ich möchte, dass die Textfelder dynamisch in derselben Form generiert werden.

Wie mache ich das?

Mit JavaScript:

var input = document.createElement("input");
input.type = "text";
input.className = "css-class-name"; // set the CSS class
container.appendChild(input); // put it into the DOM

Mit Javascript brauchen Sie nur document.createElementund setAttribute.

var input = document.createElement("input");
input.setAttribute('type', 'text');

Anschließend können Sie appendChilddas erstellte Element an das gewünschte übergeordnete Element anhängen.

var parent = document.getElementById("parentDiv");
parent.appendChild(input);

Vielleicht ist die Methode genau das, document.createElement();wonach Sie suchen.

So erstellen Sie die Anzahl der vom Benutzer angegebenen Eingabefelder

1. Holen Sie sich die Anzahl der Textfelder vom Benutzer und weisen Sie sie einer Variablen zu.

   var no = document.getElementById("idname").value

2. Verwenden Sie zum Erstellen von Eingabefeldern die createElementMethode und geben Sie den Elementnamen, dh "input", wie unten angegeben als Parameter an und weisen Sie ihn einer Variablen zu.

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

3. Weisen Sie dann der Variablen die erforderlichen Attribute zu.

   textfield.type = "text";

   textfield.value = "";

4. Zuletzt wird die Variable mit der appendChildMethode an das Formularelement angehängt . Damit wird das Eingabeelement im Formularelement selbst erstellt.

   document.getElementById('form').appendChild(textfield);

5. Durchlaufen Sie die Schritte 2,3 und 4, um die gewünschte Anzahl von Eingabeelementen zu erstellen, die der Benutzer im Formularelement angegeben hat.

   for(var i=0;i<no;i++) {           
       var textfield = document.createElement("input");
       textfield.type = "text"; textfield.value = "";
       document.getElementById('form').appendChild(textfield);
   }
   

Hier ist der vollständige Code

function fun() {
    /*Getting the number of text fields*/
    var no = document.getElementById("idname").value;
    /*Generating text fields dynamically in the same form itself*/
    for(var i=0;i<no;i++) {
        var textfield = document.createElement("input");
        textfield.type = "text";
        textfield.value = "";
        document.getElementById('form').appendChild(textfield);
    }
}

<form id="form">
    <input type="type" id="idname" oninput="fun()" value="">
</form>

Sie können so etwas in einer Schleife basierend auf der Anzahl der eingegebenen Textfelder tun.

$('<input/>').attr({type:'text',name:'text'+i}).appendTo('#myform');

Aber für eine bessere Leistung würde ich zuerst das gesamte HTML erstellen und es nur einmal in das DOM einfügen.

var count = 20;
var html = [];
while(count--) {
  html.push("<input type='text' name='name", count, "'>");
}
$('#myform').append(html.join(''));

In diesem Beispiel wird jQuery zum Anhängen des HTML-Codes verwendet. Sie können es jedoch problemlos ändern, um auch innerHTML zu verwenden.

Sie können die createElement()Methode zum Erstellen dieses Textfelds verwenden

Ich denke, der folgende Link wird Ihnen helfen. Wenn Sie Felder dynamisch generieren und gleichzeitig entfernen möchten, erhalten Sie hier die Hilfe. Ich hatte die gleiche Frage, also bekam ich die Antwort

$(function() {
        var scntDiv = $('#p_scents');
        var i = $('#p_scents p').size() + 1;

        $('#addScnt').live('click', function() {
                $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
                i++;
                return false;
        });

        $('#remScnt').live('click', function() { 
                if( i > 2  ) {
                        $(this).parents('p').remove();
                        i--;
                }
                return false;
        });
});

http://jsfiddle.net/jaredwilli/tZPg4/4/

In dieser Antwort finden Sie eine Nicht-JQuery-Lösung. Hat mir nur geholfen!

Dynamisches Hinzufügen von Eingabeelementen zur Form

Sie können ES6-Back-Quits verwenden

  var inputs = [
        `<input type='checkbox' id='chbox0' onclick='checkboxChecked(this);'> <input  type='text' class='noteinputs0'id='note` + 0 + `' placeholder='task0'><button  id='notebtn0'                     >creat</button>`, `<input type='text' class='noteinputs' id='note` + 1 + `' placeholder='task1'><button  class='notebuttons' id='notebtn1' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 2 + `' placeholder='task2'><button  class='notebuttons' id='notebtn2' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 3 + `' placeholder='task3'><button  class='notebuttons' id='notebtn3' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 4 + `' placeholder='task4'><button  class='notebuttons' id='notebtn4' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 5 + `' placeholder='task5'><button  class='notebuttons' id='notebtn5' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 6 + `' placeholder='task6'><button  class='notebuttons' id='notebtn6' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 7 + `' placeholder='task7'><button  class='notebuttons' id='notebtn7' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 8 + `' placeholder='task8'><button  class='notebuttons' id='notebtn8' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 9 + `' placeholder='task9'><button  class='notebuttons' id='notebtn9' >creat</button>`
    ].sort().join(" ");
   document.querySelector('#hi').innerHTML += `<br>` +inputs;

<div id="hi"></div>

Die Kernidee der Lösung lautet:

• Erstellen Sie ein neues inputElement
• Fügen Sie den Typ hinzu text
• Hängen Sie das Element an das DOM an

Dies kann über dieses einfache Skript erfolgen:

var input = document.createElement('input');
input.setAttribute('type', 'text');
document.getElementById('parent').appendChild(input);

Die Frage ist nun, wie dieser Prozess dynamisch gestaltet werden kann. Wie in der Frage angegeben, gibt es eine andere Eingabe, bei der der Benutzer die Anzahl der zu generierenden Eingaben eingibt. Dies kann wie folgt erfolgen:

function renderInputs(el){
  var n = el.value && parseInt(el.value, 10);
  if(isNaN(n)){
    return;
  }
  
  var input;
  var parent = document.getElementById("parent");
  
  cleanDiv(parent);
  for(var i=0; i<n; i++){
    input = document.createElement('input');
    input.setAttribute('type', 'text');
    parent.appendChild(input);
  }
}

function cleanDiv(div){
  div.innerHTML = '';
}

Insert number of input to generate: </br>
<input type="text" onchange="renderInputs(this)"/>

<div id="parent">
Generated inputs:
</div>

Normalerweise ist das Hinzufügen nur einer Eingabe nicht wirklich nützlich. Es ist jedoch besser, der Eingabe einen Namen hinzuzufügen, damit sie problemlos als Formular gesendet werden kann. Dieses Snippet fügt auch einen Namen hinzu:

function renderInputs(el){
  var n = el.value;
  var input, label;
  var parent = document.getElementById("parent");
  cleanDiv(parent);
  
  el.value.split(',').forEach(function(name){
    input = document.createElement('input');
    input.setAttribute('type', 'text');
    input.setAttribute('name', name);
    label = document.createElement('label');
    label.setAttribute('for', name);
    label.innerText = name;
    parent.appendChild(label);
    parent.appendChild(input);
    parent.appendChild(document.createElement('br'));
  });
}

function cleanDiv(div){
  div.innerHTML = '';
}

Insert the names, separated by comma, of the inputs to generate: </br>
<input type="text" onchange="renderInputs(this)"/>
<br>
Generated inputs: </br>
<div id="parent">

</div>

• Fragen Sie das Container-DOM-Element ab und rufen Sie es ab

• Neues Element erstellen

• Fügen Sie ein neues Element in den Dokumentbaum ein

//Query some Dib region you Created
let container=document.querySelector("#CalculationInfo .row .t-Form-itemWrapper");
let input = document.createElement("input");

//create new Element  for apex
input.setAttribute("type","text");
input.setAttribute("size","30");
containter.appendChild(input); // put it into the DOM

<button id="add" onclick="add()">Add Element</button>

<div id="hostI"></div>

<template id="templateInput">
    <input type="text">
</template>

<script>
    function add() {

        // Using Template, element is created
        var templateInput = document.querySelector('#templateInput');
        var clone = document.importNode(templateInput.content, true);

        // The Element is added to document
        var hostI = document.querySelector('#hostI');
        hostI.appendChild(clone);
    }

</script>

HTML-Vorlagen sind jetzt die empfohlenen Standards zum Generieren von dynamischem Inhalt.