document.createElement text field length

I'm using the following code to add rows with text fields dynamically at the touch of a button. The issue I have is that the text fields that are being created in these rows are not the size I want. Is there a way to specify the length of a text field in this situation?

function addNewRow()
{
    var iX = document.getElementById("txtIndex").value;
    iX ++;
    document.getElementById("txtIndex"开发者_StackOverflow中文版).value = iX;

    var tbl = document.getElementById("tblDetail").getElementsByTagName("TBODY")[0];
    var tr = document.createElement("TR");
    tbl.appendChild(tr);

         //Text Field:  txtOffsetDateCleared1
    var tdOffsetDateCleared = document.createElement("TD");
    tr.appendChild(tdOffsetDateCleared);

    var p = document.createElement("P");
    tdOffsetDateCleared.appendChild(p);

    var txtOffsetDateCleared = document.createElement("input"); 
    p.appendChild(txtOffsetDateCleared);

    txtOffsetDateCleared.id = "txtOffsetDateCleared" + iX;

    var txtOffsetDateCleared1 = document.getElementById("txtOffsetDateCleared1");
    var i = 0;

    for (i = 0; i < txtOffsetDateCleared1.children.length; i++)
        {
            var opt = document.createElement("option");
            opt.value = txtOffsetDateCleared1 [i].value;
            opt.innerText = txtOffsetDateCleared1 [i].innerText;
            txtOffsetDateCleared.appendChild(opt);
        }
}

You can either set the width CSS property or the size HTML attribute:

txtOffsetDateCleared.setAttribute('size',10); // HTML attribute
txtOffsetDateCleared.style.width = '200px';   // CSS property

I recommend the CSS property instead of the HTML attribute because the latter one specifies the width as the amount of displayed characters inside the text box. The CSS property will set the exact width of the element.