使用+=将新元素与先前的元素相加。

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>

为了直接回答您的问题，在向其中添加新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：
一个二个一个一个

实际上，在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++;
            }
    }

这应该工作..

<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>

试试这个

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>

你应该像这样把+加到你的代码中：

innerHtml +=;

就是这样，意思是在前面的基础上增加元素。