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

Posted 2023-05-07

【中文标题】如何使用 JavaScript 在 div 中插入多个元素？

【英文标题】：How do I insert several elements in a div using JavaScript?

【发布时间】：2019-04-24 18:18:59

【问题描述】：

我尝试为我对 JS 非常陌生。以我的方式，新添加的字段不断删除以前的：

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>

【问题讨论】：

在创建下一个 div 时要删除前一个 div 吗？

使用 appendChild 代替 innerHtml。

***.com/questions/17650776/…的可能重复

阅读此MDN-appendChild

【参考方案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>

【参考方案2】：

要直接回答您的问题，您应该在向其中添加新 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>

【参考方案3】：

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

【参考方案4】：

这应该工作..

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

【参考方案5】：

试试这个

 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>