Question

我是javascript的新手。我试图在运行时动态添加多个文本框..

        <script type="text/javascript">
            function ajax(){
                var x = document.getElementById("ajax").innerHTML;
                x= x + '<input name="reference[]" type="text" />';
                document.getElementById("ajax").innerHTML = x;
            }
        </script>

这是一个点击事件。我的问题是，每次添加一个新的文本框时，我前一个文本框的值都会消失，并且每次调用该函数时所有文本框都为空。

Answer 1

我建议使用document.createElement和document.appendChild

Example

function ajax() {
    var textBox = document.createElement('input');
    textBox.name = 'reference[]';
    textBox.type = 'text';
    document.getElementById("ajax").appendChild(textBox);
}

Answer 2

附加到现有内容而不是覆盖它

附加：

document.getElementById("ajax").innerHTML += x;

覆盖

document.getElementById("ajax").innerHTML = x;

使用此

<script type="text/javascript">
            function ajax(){
                var x = '<input name="reference[]" type="text" />';
                document.getElementById("ajax").innerHTML += x;
            }
</script>

Javascript动态添加带有值的文本框

2 个答案: