How to create radio button dynamically using JavaScript

In this article, you are going to learn how to create a radio button dynamically using JavaScript.

To dynamically create a radio button, you need to call the createElement() method.

The following example will create a radio button with its necessary attributes.

 let newVar = document.createElement('input');
     newVar.type = 'radio';
     newVar.id = 'radio-btn';
     newVar.checked = false;
 document.querySelector('.container').appendChild(newVar);

1. In the above example, we have created an input element using the createElement() method and stored in a variable named newVar.

   let newVar = document.createElement('input');

2. Then, we have set its type to radio using the JavaScript type property and we also added an id using the id property.

   let newVar = document.createElement('input');
       newVar.type = 'radio';
       newVar.id = 'radio-btn';

3. Using the checked property, we can specify whether a checkbox should be checked or not.
   true - The checkbox is checked.
   false - The checkbox is not checked (default).

   let newVar = document.createElement('input');
       newVar.type = 'radio';
       newVar.id = 'radio-btn';
       newVar.checked = false; 

4. Now you can display the created radio button element where you want it to display using the appendChild() method.

   let newVar = document.createElement('input');
       newVar.type = 'radio';
       newVar.id = 'radio-btn';
       newVar.checked = false;
       document.querySelector('.container').appendChild(newVar);