Unordered list with Ajax and CSS

[Thevenin]

Hi all,
first of all I want to tell you that I am studying Ajax and the following code could have errors or something else.

I am trying to recreate the following HTML form with Ajax:

<div class="table_test">
    <form name="f1" target="uploader" action="upload.php" method="POST" enctype="multipart/form-data" >
    <ul>
    <li class="title">Image Name</li>
    <li class="blank"><input type="text" name="name_of_image[]"></li>
    </ul>
    <ul>
    <li class="title">Category</li>
    <li class="blank">
                <select name="category_of_image[]">
                    <option value=""></option>
                    <option value="Fight">Fight</option>
                    <option value="Racing">Racing</option>
                    <option value="Family Game">Family Game</option>
                </select>
    </li>
    </ul>
    <ul>
    <li class="title">Choose the Image to upload</li>
    <li class="blank"><input type="file" name="image_filename[]"></li>
    </ul>      

    <label for="submit">Add other file(s):&nbsp;</label> <br />
    <input type="button" name="addFile" value="Add more files" onClick="window.addFile(this);"> 
    <input type="submit" value="Upload" name="upload">
    </form>
</div>

So I created the form with Ajax, but now I don't know how to apply the CSS style I used in HTML:

<script> 
function addFile(addFileButton) {       
    var form = document.forms['f1'];

    var nameoftheImg = document.createElement("label");
    nameoftheImg.appendChild(document.createTextNode("Image Name"));

    var catoftheImg = document.createElement("label");
    catoftheImg.appendChild(document.createTextNode("Category"));

    var upooftheImg = document.createElement("label");
    upooftheImg.appendChild(document.createTextNode("Choose the Image to upload"));

    var imgname = document.createElement("input");
    imgname.type = "file";
    imgname.name = "image_filename[]";  

    var nameofimage = document.createElement("input");
    nameofimage.type = "text";
    nameofimage.name = "name_of_image[]";

    var catoftheImg = document.createElement("select");
    catoftheImg.name = "category_of_image[]";

    catoftheImg.options[0] = new Option("","");
    catoftheImg.options[1] = new Option("Fight","Fight");
    catoftheImg.options[2] = new Option("Racing","Racing");
    catoftheImg.options[3] = new Option("Family Game","Family Game");   

    form.insertBefore(nameoftheImg, addFileButton);
    form.insertBefore(name_of_image, addFileButton);
    form.insertBefore(catoftheImg, addFileButton);
    form.insertBefore(category_of_image, addFileButton);
    form.insertBefore(upooftheImg, addFileButton);
    form.insertBefore(image_filename, addFileButton);
}
</script>

The CSS:

.table {
    background:#333;
}

.table ul {
    float:left;
    margin:0;
    padding:0;
    border:1px solid #C9C9C9;
}

.table ul li {
    list-style:none;
    padding:5px 10px;
}
.table ul li.title {
    font-weight:bold;
    background:#333;
    color:#fff;
}
.table ul li.blank {
    background:#fff
}

Without changing the entire script, is it possible to add the "div class=table_test", the "ul" and the "li" tags with their CSS style?

[mehrantahir]

i thing you must try the wrap function,like $(#list ul li).wrap('<div id="table_test" />');

[Thevenin]

Ye thank you.
This is what I did yesterday.