如何使用使用Javascript动态创建的输入字段？

Question

I know how to work with input field using Javascript. But when I create a input field dynamically using javascript createElement method, I am not being able to work with that. As I have not started learning PHP, I want to know how to work with dynamically created input field using javascript.

Answer 1

If you add an Element using createElement You can then work with the element by referring to the element by ID or Class.

document.getElementById()

document.getElementsByClassName()

Take a look at MDN site for examples

Answer 2

Probably easiest way to track (and manipulate) the input fields is with the getElementsByTagName(); which returns an array of all the elements with the specified tag .

So, as an example:

 // saves all current elements in an array var inputsArr = document.getElementsByTagName('input'); console.log('Current input fields: ' + inputsArr.length); // now let's create our new Element and set its attributes! var newinput = document.createElement('input'); newinput.setAttribute('type', 'button'); newinput.setAttribute('value', 'Submit form'); // adds (appends) the newly created input document.getElementById('structure').appendChild(newinput); console.log('-- button added'); var newinputsArr = document.getElementsByTagName('input'); console.log('Current input fields: ' + newinputsArr.length); // and we can manipulate with the newly added element newinputsArr[2].setAttribute('style', 'background:gold;'); 

 input[type="button"]{ display: block; margin-top: 10px; } #structure { background: lightgray; height: 70px; } 

 <form id="structure"> Login: <input type="text"> Password: <input type="password"> </form> 

In the snippet below I showcased

1. How to fill an array with existing input elements
2. How to add a new input item and then access it
3. How to manipulate with the newly added element

Note, I intentionally created two separate arrays, as a showcase. So if you meant to manipulate eg. with only newly added elements, you can apply the the expression only to the 'extra' elements of the difference between newinputsArr.length and inputsArr.length

Answer 3

You probably forgot to add the input field to the body of the document. When you create an element with document.createElement , never forget to append it to the body when you are done.

var input = document.createElement("input");
document.body.appendChild(input);

 <span id="result"></span><br/> <script> var input = document.createElement("input"); input["type"] = "text"; document.body.appendChild(input); input.addEventListener("keypress", function(e){ document.getElementById('result').textContent = "Key: "+e.key+" KeyCode: "+e.keyCode+" Value: "+this.value+e.key; }); </script>