将新元素添加到div将删除当前值

时间:2011-11-03 16:49:12

标签: javascript html

所以我有一个js函数:

function addNewUpload()
{
    if(formNumber == 1){
        displayRemove();
    }

    if(formNumber != 10){
        var html = " <div id='u_"+(formNumber+1)+"' > ";
        //html += " description : <input type='text' name='desc[]' /> <br> ";
        html += " photo : <input type='file' name='file[]' />   ";
        html += " </div> ";
        document.getElementById('uploadHolder').innerHTML += html;

        formNumber = formNumber + 1;
    } else {
        alert("You can only upload 10 photos.");
    }                                                                               
}

它工作正常,除了它从已使用此函数添加的字段中删除值。我怎么能阻止它这样做?

2 个答案:

答案 0 :(得分:4)

你应该使用像appendChild和createNewElement等DOM方法。

尝试以下几点:

http://jsfiddle.net/9YHs8/(在此示例中,类型的“文件”已更改为文本以用于演示目的)。

function addNewUpload()
{
    if(formNumber == 1){
        displayRemove();
    }

    if(formNumber != 10){
        var d = document.createElement("div");
        d.id = "u_" + formNumber;
        var i = document.createElement("input");
        i.type = "file";
        i.name = "file[]";
        d.appendChild(document.createTextNode(" photo : "));
        d.appendChild(i);
        document.getElementById('uploadHolder').appendChild(d);

        formNumber++;
    } else {
        alert("You can only upload 10 photos.");
    }                                                                               
}

答案 1 :(得分:0)

这是正常的

你说“把我的块的innerhtml添加一些内容然后用这个字符串重新初始化我的块的内部html”

表单的值不在innerhtml中!

看看这个帖子:Inserting HTML elements with JavaScript