Add input field onclick with new name

Issue

I want to display a new input field with a new name everytime a button is clicked. how do I achieve that? I found solutions to adding the input but none mentions adding a new name to it.

HTML:

<a href="" onclick="addKeywordFields()">Add a keyword</a>
<div id="fieldContainer"></div>

Javascript:

function addKeywordFields() {
    var mydiv = document.getElementById("fieldContainer");
    mydiv.appendChild(document.createTextNode("<input type='text' name=''>"))
}

Solution

You should not use document.createTextNode to create an input. This will only create a text element with content specified inside it.

Instead you should create an input using document.createElement('input') and specify its type and name.

Since you need a dynamic name, you have to integrate a dynamic name generation logic. Here I used (new Date()).toISOString() since this will e unique each time. Instead you have to use your own logic.

Working Fiddle

function addKeywordFields() {
    var mydiv = document.getElementById("fieldContainer");
    const input = document.createElement('input');
    input.type = 'text';
    input.name = (new Date()).toISOString(); // Some dynamic name logic
    mydiv.appendChild(input);
}

<a onclick="addKeywordFields()">Add a keyword</a>
<div id="fieldContainer"></div>

Answered By - Nitheesh