How to add an HTML form element dynamically using javascript

Question

I'm trying to add a text field to a form dynamically using javascript. From what I can tell, my code should work.

function change()
{
textField = document.createElement("text");
textField.id="sub"+count;
textField.name="sub"+count;
textField.value="Enter a name for another new subcategory";
textField.size="35";
textField.onchange="javascript:change()";
textField.onFocus="javascript:clearField()";
document.getElementById("addCatForm").appendChild(textField);
}

Answer 1

You want:

var field = document.createElement('input');
field.type = 'text';

NB if you're doing lots of Javascript development, you might want to use a framework, such as ExtJS

The code to do it would be:

var field = Ext.get('form').createChild({
    tag: 'input'
    //other options
});
field.on('change', change);
field.on('focus', focus);

Answer 2

You're creating a TEXT element, but adding things to it for an INPUT element.