How do I insert several elements in a div using JavaScript?

Question

I try to do a dynamic for ans I am very new with JS. With what I do, new added field keeps on deleting the previous:

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>

Do you want to delete the previous div on the creation of next div? — p u, Nov 22 '18 at 05:59
Possible duplicate of https://stackoverflow.com/questions/17650776/add-remove-html-inside-div-using-javascript — DevProf, Nov 22 '18 at 06:04
Read this [MDN-appendChild](https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild) — Suman Kundu, Nov 22 '18 at 06:09

score 0 · Answer 1 · answered Nov 22 '18 at 06:06

use += to add the new element with previous elements.

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>

p u · Answer 2 · 2018-11-22T06:30:14.170

Try this

 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>

score 0 · Answer 3 · answered Nov 22 '18 at 06:11

To directly answer your problem, you should use += instead of = when you add new HTML into it because by using =, you are overriding existing child elements inside it (deleting them).

So by using +=, you are just appending after existing child elements instead of overriding them.

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>

Better yet, you should use DOM method appendChild directly instead of adding raw 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>

score 0 · Answer 4 · answered Nov 22 '18 at 06:13

Actually, in your while code, you are missing + sign due to which each time the loop is adding only one element removing previously added input fields.

Just update your function like

 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++;
            }
    }

score 0 · Answer 5 · answered Nov 22 '18 at 06:13

This should work..

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

score 0 · Answer 6 · edited Dec 14 '22 at 20:52

0

You should just add + to your code like this:

innerHtml +=;

That is all. It means adding element to the previous.

edited Dec 14 '22 at 20:52

Rich

6,470
15
32
53

answered Dec 11 '22 at 05:32

Bekzod Shamsiyev

29
2

How do I insert several elements in a div using JavaScript?

6 Answers6