Adding textbox at dynamic positions in JavaScript

I want to add few text boxes at dynamic position in a form.

Say something like this

I have JavaScript like this:

    function addRow(tableID) {

        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        var cell1 = row.insertCe开发者_运维技巧ll(0);
        var element1 = document.createElement('<input type="checkbox" name="chk">');
        cell1.appendChild(element1);

        var cell4 = row.insertCell(3);
        var element4 = document.createElement('<INPUT type="text" name="SubpartID"/>');
        cell4.appendChild(element4);

        var cell5 = row.insertCell(4);
        var element5 = document.createElement('<INPUT type="text" name="Quantity" value="1" />');
        cell5.appendChild(element5);

    }

but problem with this script is, When I click "Add Subpart Input Row" button, I am able to see a new row added but only with check box in that.

I guess cell4.appendChild(element4); and cell5.appendChild(element5); does not work.

So the output looks like this,

Could you please help?

Seems you are using document.createElement the wrong way. You need to do it like this:

var element5 = document.createElement('input');
    element5.type = 'text';
    element5.name = 'Quantity';
    element5.value = 1;
cell5.appendChild(element5);

Should be the same for the rest except with different attributes and value.