How to add a TextBox on button click in JavaScript?

In this article, you will learn how to dynamically add a TextBox using JavaScript when a button is clicked.

This can be useful when you want to allow users to input data on-demand without overwhelming the interface.

We'll explore two methods to achieve this: using the createElement() method and the innerHTML property. Let's dive in!

Method 1: Using the createElement Method #

Adding a TextBox dynamically can be achieved by creating a new HTML element using the createElement() method.

1. HTML Setup: Create an HTML file with a button and a container where the TextBox will be added.

2. JavaScript Code: Add the following code to your script.js file to create and append the TextBox to the container.

Method 2: Using the innerHTML property #

Another way to add a TextBox is by manipulating the innerHTML property of an element. Here's how you can do it:

1. HTML Setup: Use the same HTML setup as in Method 1.

2. JavaScript Code: Modify your script.js file with the following code to add the TextBox using the innerHTML property.

Key Points to Remember:

1. Use the createElement() method to dynamically create HTML elements.
2. The innerHTML property can be used to add or modify HTML content within an element.
3. Both methods attach the newly created TextBox to the container element.
4. The addEventListener function is used to capture button clicks.
5. The appendChild method is used to insert a newly created element into the DOM.

Conclusion: #

In this article, you've learned two methods to dynamically add a TextBox using JavaScript when a button is clicked.