Question

我尝试对an进行动态处理，我对JS非常陌生。通过我的操作，新添加的字段会继续删除前一个字段：

model

view

Answer 1

使用+ =添加具有先前元素的新元素。

function add_input() {
        var s = document.getElementById('ref').value;
        var i = 0;
            while ( i < s) {
            console.log(s);
            document.getElementById('the_list').innerHTML +='<p><input type="text" name="holder_'+ i +'" ></p>';
                        i++;
            }
    }

<input type="number" name="ref" id="ref" onchange="add_input();">
<div id="the_list"></div>

Answer 2

尝试一下

 function add_input() {
        
        $( "#the_list" ).empty();//if you want to delete previous elements otherwise remove this
        var s = document.getElementById('ref').value;
        var i = 0;
            while ( i < s) {
$('#the_list').append('<p><input type="text" name="holder_'+ i +'" /></p>');  
                        i++;
            }
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" name="ref" id="ref" onchange="add_input();">
<div id="the_list"></div>

Answer 3

要直接回答您的问题，在向其中添加新HTML时，应使用+=而不是=，因为使用=会覆盖其中的现有子元素（删除他们）。

因此，通过使用+=，您只是在现有子元素之后追加，而不是覆盖它们。

function add_input() {
  var s = document.getElementById('ref').value;
  var i = 0;
    while (i < s) {
      document.getElementById('the_list').innerHTML += '<p><input type="text" name="holder_'+ i +'" /></p>';
      i++;
    }
}

<input type="number" name="ref" id="ref" onchange="add_input();">
<div id="the_list"></div>

更好的是，您应该直接使用DOM方法appendChild而不是添加原始HTML：

function add_input() {
  var theList = document.getElementById('the_list');
  var s = document.getElementById('ref').value;
  var i = 0;
  var p;
  var input;
  while ( i < s) {
    p = document.createElement('p');
    input = document.createElement('input');
    input.setAttribute('type', 'text');
    input.setAttribute('name', 'holder_' + i);
    p.appendChild(input);
    theList.appendChild(p);
    i++;
  }
}

<input type="number" name="ref" id="ref" onchange="add_input();">
<div id="the_list"></div>

Answer 4

实际上，在您的while代码中，您缺少+号，因此每次循环仅添加一个元素时，都会删除先前添加的输入字段。

只需像更新您的功能

 function add_input() {
        var s = document.getElementById('ref').value;
        document.getElementById('the_list').innerHTML = ""; // setting innerHTML of div to empty
        var i = 0;
            while ( i < s) {
            document.getElementById('the_list').innerHTML +='<p><input type="text" name="holder_'+ i +'" /></p>';
            //You are missing that + sign
                        i++;
            }
    }

Answer 5

这应该有效。.

<script type="text/javascript">
    function add_input(){
        var s = document.getElementById('ref').value;
        var i = 0;
            while ( i < s) {
              var ele = document.createElement("INPUT");
              ele.setAttribute("type", "text");
              ele.setAttribute("value", "Hello World!"); 
              ele.setAttribute("name", "holder_"+i); 
              document.getElementById('the_list').appendChild(ele);
              i++;
            }
    }
 </script>

如何使用JavaScript在div中插入几个元素？

5 个答案: