javascript - 点击后输入文本恢复默认值

Question

下面的表格可以按我的意愿工作，除了一件事。当我单击“添加”链接时，所有文本框的文本都会返回到其默认值，如图像中所示。我该如何解决？谢谢。

点击前：

点击“添加”后：

代码：

function addSection() {
    var str = '<div>' + 
                '<input type="text" name="composer" value="Compositor" />' + 
                '<input type="text" name="peca" value="Peca" size="40" />' + 
                '<input type="button" value="x" style="width: 26px" onclick="delSection(this)" /><br />' + 
            '</div>';

    document.getElementById("programa").innerHTML += str;
}

function delSection(field) {
    field.parentNode.outerHTML = "";
}

window.onload = addSection;

</script>
<fieldset>
    <legend>Programa</legend>
    <div id="programa">
    </div>
    <a href="#" onclick="addSection()" >Add</a><br />
</fieldset>
<input type="submit" value="Inscrever Aluno" name="submit" />

Answer 1

你可以克服这个，使用appendChild()

JS

function newSet() {
    var div = document.createElement("div");   

    var composer = document.createElement("input");
    composer.type="text";
    composer.value = "Compositer";

    var peca = document.createElement("input");
    peca.type = "text";
    peca.value = "Peca";

    var button = document.createElement("input");
    button.type = "submit"

    div.appendChild(composer);
    div.appendChild(peca);
    div.appendChild(button);

    return div
}

function addSection() {    
    document.getElementById("programa").appendChild(newSet());
}

演示

Answer 2

这是插入新元素的正确 JS：

function addSection() {
    var newDiv = document.createElement('div');
    var str =   '<input type="text" name="composer" value="Compositor" />' + 
                '<input type="text" name="peca" value="Peca" size="40" />' + 
                '<input type="button" value="x" style="width: 26px" onclick="delSection(this)" /><br />';
    newDiv.innerHTML = str;
    document.getElementById("programa").appendChild(newDiv);
}

您需要找到命名（或识别）元素的解决方案，以便您可以使用delSelection(field)

Answer 3

创建一个名称，例如name="composer[]"和name="peca[]"

如果您不了解如何实现上述代码，请转到

http://www.randomsnippets.com/2008/02/21/how-to-dynamically-add-form-elements-via-javascript/