How to Add an Input Field on Button Click in JavaScript ? Last Updated : 27 Jul, 2025 Comments Improve Suggest changes Like Article Like Report JavaScript allows us to dynamically add an input field upon button click. We can use the below approaches for adding an input field on Button Click in JavaScript. Table of Content Using DOM ManipulationUsing Template Literal and InnerHTMLUsing DOM ManipulationDOM manipulation is used to dynamically create and append input fields upon clicking the "Add Input Field" button. We create a div wrapper for each input field to ensure the proper layout and styling. Example: The below example uses DOM Manipulation to Add an input Field on a Button Click in JavaScript. HTML <!DOCTYPE html> <head> <title>Example 1</title> <style> body { font-family: Arial, sans-serif; text-align: center; } .container { display: block; text-align: center; margin-top: 20px; } .input-field { width: 200px; padding: 8px; border: 1px solid #ccc; border-radius: 5px; margin: 10px auto; } .add-button { padding: 8px 20px; background-color: green; color: #fff; border: none; border-radius: 5px; cursor: pointer; } </style> </head> <body> <h3>Using DOM Manipulation</h3> <div class="container"> <button class="add-button" onclick="addFn()">Add Input Field</button> <div id="inputFields"></div> </div> <script> function addFn() { const divEle = document.getElementById("inputFields"); const wrapper = document.createElement("div"); const iFeild = document.createElement("input"); iFeild.setAttribute("type", "text"); iFeild.setAttribute("placeholder", "Enter value"); iFeild.classList.add("input-field"); wrapper.appendChild(iFeild); divEle.appendChild(wrapper); } </script> </body> </html> Output: Using Template Literal and InnerHTMLIn this approach, we are using template literals and innerHTML to dynamically generate HTML content upon clicking the "Add Input Fields" button. Two input fields are added inside a div wrapper each time the button is clicked. Example: The below example uses Template Literal and InnerHTML to Add an input Field on a Button Click in JavaScript. HTML <!DOCTYPE html> <head> <title>Example 2</title> <style> body { font-family: Arial, sans-serif; text-align: center; } .container { display: block; text-align: center; margin-top: 20px; } .input-field { width: 200px; padding: 8px; border: 1px solid #ccc; border-radius: 5px; margin: 10px auto; } .add-button { padding: 8px 20px; background-color: green; color: #fff; border: none; border-radius: 5px; cursor: pointer; } </style> </head> <body> <h3>Using Template Literal and InnerHTML</h3> <div class="container"> <button class="add-button" onclick="addFn()">Add Input Fields</button> <div id="inputFields"> </div> </div> <script> function addFn() { const divEle = document.getElementById("inputFields"); divEle.innerHTML += ` <div> <input type="text" placeholder="Enter value" class="input-field"> <input type="text" placeholder="Enter value" class="input-field"> </div> `; } </script> </body> </html> Output: Comment More infoAdvertise with us Next Article Company Preparation G gauravggeeksforgeeks Follow Improve Article Tags : JavaScript Web Technologies JavaScript-Questions Similar Reads Interview PreparationInterview Preparation For Software DevelopersMust Coding Questions - Company-wise Must Do Coding Questions - Topic-wiseCompany-wise Practice ProblemsCompany PreparationCompetitive ProgrammingSoftware Design-PatternsCompany-wise Interview ExperienceExperienced - Interview ExperiencesInternship - Interview ExperiencesPractice @GeeksforgeeksProblem of the DayTopic-wise PracticeDifficulty Level - SchoolDifficulty Level - BasicDifficulty Level - EasyDifficulty Level - MediumDifficulty Level - HardLeaderboard !!Explore More...Data StructuresArraysLinked ListStackQueueBinary TreeBinary Search TreeHeapHashingGraphAdvance Data StructuresMatrixStringAll Data StructuresAlgorithmsAnalysis of AlgorithmsSearching AlgorithmsSorting AlgorithmsPattern SearchingGeometric AlgorithmsMathematical AlgorithmsRandomized AlgorithmsGreedy AlgorithmsDynamic ProgrammingDivide & ConquerBacktrackingBranch & BoundAll AlgorithmsProgramming LanguagesCC++JavaPythonC#Go LangSQLPHPScalaPerlKotlinWeb TechnologiesHTMLCSSJavaScriptBootstrapTailwind CSSAngularJSReactJSjQueryNodeJSPHPWeb DesignWeb BrowserFile FormatsComputer Science SubjectsOperating SystemsDBMSComputer NetworkComputer Organization & ArchitectureTOCCompiler DesignDigital Elec. & Logic DesignSoftware EngineeringEngineering MathematicsData Science & MLComplete Data Science CourseData Science TutorialMachine Learning TutorialDeep Learning TutorialNLP TutorialMachine Learning ProjectsData Analysis TutorialTutorial LibraryPython TutorialDjango TutorialPandas TutorialKivy TutorialTkinter TutorialOpenCV TutorialSelenium TutorialGATE CSGATE CS NotesGate CornerPrevious Year GATE PapersLast Minute Notes (LMNs)Important Topic For GATE CSGATE CoursePrevious Year Paper: CS exams Like