Comment ajouter un Input text à un formulaire HTML en JavaScript ?

Réponses rédigées par Antoine

Dernière mise à jour : 2020-10-09 16:08:25

Question

Comment faire pour ajouter des champs texte du type <input type="text"> dynamiquement à un formulaire HTML en JavaScript ?

Réponse

Pour ajouter dynamiquement des champs texte du type <input type="text"> à un formulaire, en JavaScript, vous pouvez utiliser les méthodes createElement(), setAttribute(), appendChild() et innerHTML() :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Comment ajouter un Input text à un formulaire HTML en JavaScript ?</title>  
</head>
<body>
<div id="container"></div>
<button onclick="ajouterInput_text()">Ajouter un champ texte</button>
<script>
var id = 0;
function ajouterInput_text() 
{
id++;
var container = document.getElementById("container");
var input = document.createElement("input");
input.setAttribute("type", "text");
input.setAttribute("id", id);
input.setAttribute("placeholder", "Input id numéro " + id);
container.appendChild(input);
container.innerHTML += "<br>";
}
</script>
</body>
</html>