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" >
    <li class="title">Image Name</li>
    <li class="blank"><input type="text" name="name_of_image[]"></li>
    <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>
    <li class="title">Choose the Image to upload</li>
    <li class="blank"><input type="file" name="image_filename[]"></li>

    <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">

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

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

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

    var catoftheImg = document.createElement("label");

    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);

The CSS:

.table {

.table ul {
    border:1px solid #C9C9C9;

.table ul li {
    padding:5px 10px;
.table ul li.title {
.table ul li.blank {

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?

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

Ye thank you.
This is what I did yesterday.