Question

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

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)

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

提前致谢。

Answer 1

页面不刷新，所以这不是问题。问题是您使用.innerHTML +=添加新元素。这将 destroy 和重新创建现有元素：元素被序列化为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;
}

如何在文本字段中保留文本

1 个答案: