만드는 방법

만드는 방법 동적으로

---

웹 양식에 동적으로 입력 유형 텍스트를 만들고 싶습니다. 보다 구체적으로, 사용자가 원하는 텍스트 필드 수를 입력하는 텍스트 필드가 있습니다. 텍스트 필드가 동일한 형식으로 동적으로 생성되기를 원합니다.

어떻게하나요?

---

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

---

Javascript를 사용하면 document.createElement및 setAttribute.

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

그런 appendChild다음를 사용 하여 생성 된 요소를 원하는 상위 요소에 추가 할 수 있습니다 .

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

---

아마도 그 방법 document.createElement();은 당신이 찾고있는 것입니다.

---

입력 한 텍스트 필드의 수에 따라 루프에서 이와 같은 작업을 수행 할 수 있습니다.

$('<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도 사용하도록 쉽게 수정할 수 있습니다.

---

createElement()해당 텍스트 상자를 만드는 방법을 사용할 수 있습니다.

---

다음 링크가 도움이 될 것이라고 생각합니다. 필드를 동적으로 생성하고 동시에 제거하려는 경우 여기에서 도움을받을 수 있습니다. 같은 질문이있어서 답을 얻었습니다

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

---

비 JQuery 솔루션에 대해서는이 답변을 참조하십시오. 그냥 도와 줬어요!

양식에 동적으로 입력 요소 추가

---

여기 내 해결책이 있습니다.

function fun() {
/*getting the number of text field*/
var no = document.getElementById("idname").value;
/*text fields to be generated dynamically in the same form*/
  for(var i=0;i<no;i++) 
   {
    var textfield = document.createElement("input");
    textfield.type = "text";
    textfield.id = "idname4textfeild"; 
    textfield.setAttribute("value","");
    document.getElementById('form').appendChild(textfield);
  }
}

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

---

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>

참고 URL : https://stackoverflow.com/questions/5656392/how-to-create-input-type-text-dynamically