Як динамічно створювати <input type = “text” />

Question 1

Я хочу динамічно створювати текст типу введення у своїй веб-формі. Більш конкретно, у мене є текстове поле, де користувач вводить кількість бажаних текстових полів; Я хочу, щоб текстові поля генерувались динамічно в однаковій формі.

Як це зробити?

Question 2

За допомогою 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

Question 3

Використовуючи Javascript, вам потрібно лише document.createElementта setAttribute.

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

Потім ви можете використовувати, appendChildщоб додати створений елемент до бажаного батьківського елемента.

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

Question 4

Можливо, метод document.createElement();- це те, що ви шукаєте.

Question 5

Створити кількість полів введення, заданих користувачем

Отримати кількість текстових полів від користувача і призначити його змінній.

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

Для створення полів введення використовуйте createElementметод і вкажіть ім'я елемента, тобто "input" як параметр, як показано нижче, і призначте його змінній.

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

Потім призначте змінні необхідні атрибути.

textfield.type = "text";

textfield.value = "";

Нарешті додайте змінну до елемента форми за допомогою appendChildметоду. так що елемент введення буде створений у самому елементі форми.

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

Повторіть кроки 2,3 та 4, щоб створити бажану кількість елементів введення, заданих користувачем всередині елемента форми.

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

Ось повний код

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>

Розгорніть фрагмент

Question 6

Дивіться цю відповідь для рішення, яке не стосується JQuery. Просто допоміг мені!

Динамічне додавання елементів введення до форми

Question 7

Ви можете зробити щось подібне у циклі на основі кількості введених ними текстових полів.

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

Але для кращої продуктивності я спочатку створив весь html і ввів його в DOM лише один раз.

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

Редагувати цей приклад використовує jQuery для додавання html, але ви можете легко змінити його, використовуючи також innerHTML.

Question 8

Ви можете використовувати createElement()метод для створення цього текстового поля

Question 9

Думаю, наступне посилання допоможе вам. Якщо ви хочете динамічно генерувати поля, а також одночасно видаляти їх, ви можете отримати допомогу звідси. У мене було те саме запитання, тож я отримав відповідь

$(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/

Question 10

Ви можете використовувати зворотний вихід ES6

  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>

Розгорніть фрагмент

Question 11

Основною ідеєю рішення є:

створити новий inputелемент
Додайте тип text
додати елемент до DOM

Це можна зробити за допомогою цього простого сценарію:

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

Тепер питання полягає в тому, як зробити цей процес динамічним. Як зазначено у питанні, є ще один вхід, де користувач вставляє кількість введених даних. Це можна зробити наступним чином:

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>

Розгорніть фрагмент

але зазвичай додавання лише введення насправді не є корисним, було б краще додати ім'я до входу, щоб його можна було легко надіслати як форму. Цей фрагмент також додає ім’я:

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>

Розгорніть фрагмент

Question 12

Запит та отримання елемента DOM контейнера
Створити новий елемент
Додайте новий елемент до дерева документів

//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

Question 13

<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 тепер є рекомендованими стандартами для створення динамічного вмісту.