How to create `` dynamically

javascript

input-creation

form-handling

user-experience

byAnton Shumikhin·Aug 15, 2024

Surefire way to dynamically add a text input field in JavaScript, no fuss, just the facts:

Create an input element.
Set its type to 'text'.
Append it to the DOM.

Let's see it in action:

let input = document.createElement('input'); // Square one
input.type = 'text'; // Stay 'text'-y, my friends
document.body.appendChild(input); // Set it free in the wild, the DOM-ish wild!

And boom! You've added an input field faster than your neighbor's speedy retriever!

Customization: beyond plain Jane inputs

Adding styles and classes like a professional fashion designer

Who doesn't love a good makeover? Let's spruce up your input:

input.className = 'text-input-style'; // The belle of the ballroom with CSS

That's assuming you've got a glamorous .text-input-style ready in your CSS, of course!

Setting attributes: a name and secret message

Well, inputs do like their secrets! Let's set some name and placeholder attributes:

input.setAttribute('name', 'userInput'); // Names are important
input.setAttribute('placeholder', 'Enter text'); // A helpy hint

This boosts form handling and gives a shine to user experience (UX).

Integration into forms: hallo, Formenstein!

Wanna add it into a form? Just point to the form and go for it:

let form = document.getElementById('myForm'); // Your form ID
form.appendChild(input); // One small step for your form, one giant leap for formkind

Bingo! Now it's part of the form data realm.

Advanced implementations: because who doesn't like to show off?

Generating an army of text inputs

If one input field is good, what about multiple inputs? Here goes your secret weapon:

function addInputs(num) {
  let container = document.getElementById('input-container');
  for (let i = 0; i < num; i++) {
    let input = document.createElement('input');
    input.type = 'text';
    input.name = 'text' + i; // Naming convention for the cool kids
    container.appendChild(input);
  }
}

Launch the elites by calling addInputs(5);. And... they... are... live!

User-triggered input creation: summon with a click!

Ever wanted to have inputs popping up at the click of a button? Let's nail that:

document.getElementById('addButton').addEventListener('click', function() {
  let input = document.createElement('input');
  input.type = 'text'; 
  document.body.appendChild(input); // Bam! New input in town
});

Don't forget, addButton is the trigger-happy ID of your button or control element.

User-friendly elements: because we care!

Clearing before renewing

In the spirit of cleanliness, let's erase old inputs before conjuring new:

container.innerHTML = ''; // Vanish, Old inputs!
addInputs(n); // Rise anew, oh inputs!

Validation and accessibility features

Sprinkle a dash of input validation for data's sake, and a pinch of accessibility:

input.setAttribute('required', true); // Validation: Check!
input.setAttribute('aria-label', 'Text input'); // Accessibility: Check!

Now your inputs are not just pretty faces, they're robust and user-friendly.

explain-codes / Javascript / How to create `` dynamically

Linked

How do I preserve line breaks when getting text from a textarea?



How do I fetch the value of a text input field using JavaScript?



How to append text to a div element?



How do I create a new line in Javascript?



Creating a div element in jQuery



Strip HTML tags from text using plain JavaScript



Innertext vs innerHTML vs label vs text vs textContent vs outerText



Customization: beyond plain Jane inputs Advanced implementations: because who doesn't like to show off?User-friendly elements: because we care!