3

我有一个链接，该链接的目的是在我单击它时动态添加一个文本字段。但问题是，如果我在之前生成的文本字段中输入了文本并单击链接，则会生成文本字段，但页面会刷新并且输入文本会重置。

.html 文件

<script>
    var countBox =3;
    var boxName = 0;
    function addInput()
    {
        var boxName="textBox"+countBox; 
    document.getElementById('responce').innerHTML+='<br /><input type="radio" name="choices"  value="o'+countBox+'" id="o'+countBox+'"/><label>Option '+countBox+':</label> <input type="text" id="option'+countBox+'" name="option'+countBox+'"" placeholder="Enter here..."  /><br/>';
        countBox += 1;
    }
</script>
<br /><a href="javascript:void()" onclick="addInput()">Add another</a>(max.5)

如何添加文本字段并保留文本字段中的文本。希望你明白我的问题

提前致谢。

4

1 回答 1

8

页面没有刷新，所以这不是问题。问题是您正在使用.innerHTML +=添加新元素。这将破坏并重新创建现有元素：元素被序列化为 HTML，然后连接字符串以添加新的 HTML，分配后浏览器必须解析 HTML 以再次创建 DOM 元素。在此过程中，所有数据都将丢失。

改用 DOM 操作方法。即使用创建元素document.createElement并添加它们Node.appendChild。

用于.innerHTML覆盖现有内容或第一次初始化元素是可以的。但是使用它向现有元素添加元素可能会导致问题（如上所述），因此在这种情况下最好避免使用它。

例子：

function addInput() {
    var boxName="textBox"+countBox; 
    var input = document.createElement('input');
    input.id = input.name = 'option'+countBox;

    var parent = document.getElementById('responce');
    parent.appendChild(document.createElement('br'));
    parent.appendChild(input);
    // create/add other elements...
    countBox += 1;
}

或两者兼而有之：

function addInput() {
    var boxName="textBox"+countBox; 
    var container = document.createElement('div');
    container.innerHTML = '<input type="radio" name="choices"  value="o'+countBox+'" id="o'+countBox+'"/><label>Option '+countBox+':</label> <input type="text" id="option'+countBox+'" name="option'+countBox+'"" placeholder="Enter here..."  />';

    document.getElementById('responce').appendChild(container);
    countBox += 1;
}
于 2013-06-24T07:28:01.213 回答