Вставить таблицу в div блок при помощи js

Question

    <body>
     
    <div class="box">
    
     <button>Отправить</button>
    </div> 
     
     </body>
     <script> 
    
    function tableCreate(u){
        var body = document.body,
            tbl  = document.createElement('table');
            tbl.setAttribute("id", "myTable");
        tbl.style.width  = '100px';
        tbl.style.border = '1px solid black';
    
        for(var i = 0; i < u; i++){
            var tr = tbl.insertRow();
            
            for(var j = 0; j < u; j++){
                    
                    var td = tr.insertCell();
                    
                    var input = document.createElement('input');
                    input.type = "text";
                    input.style.width  = '50px';
                    input.value = "0";
                    
                    input.setAttribute("id", String(i)+String(j));
                    td.appendChild(input);
                    td.style.border = '1px solid black';
                   
            }
        }
        body.appendChild(tbl);
    }
    
    tableCreate(4);
    
    
    </script>

Создаю таблицу при помощи js. Как вставить ее в блок? Сейчас таблица создается рядом с тегом

Answer 1

Если я правильно понял вопрос то вам нужно вставить созданную таблицу в блок "box". Для этого я бы сменил class="box" на id="box", и потом body.appendChild(tbl); меняем на document.getElementById("box").appendChild(tbl);

Answer 2

Переработанный код. Неправильно указывали куда вставлять таблицу

function tableCreate(u) {
  tbl = document.createElement('table');
  tbl.setAttribute("id", "myTable");
  tbl.style.width = '100px';
  tbl.style.border = '1px solid black';

  for (var i = 0; i < u; i++) {
    var tr = tbl.insertRow();

    for (var j = 0; j < u; j++) {

      var td = tr.insertCell();

      var input = document.createElement('input');
      input.type = "text";
      input.style.width = '50px';
      input.value = "0";

      input.setAttribute("id", String(i) + String(j));
      td.appendChild(input);
      td.style.border = '1px solid black';

    }
  }
  //body.appendChild(tbl);
  var hereDiv = document.getElementById("here")
  hereDiv.appendChild(tbl)
}

tableCreate(4);

<body>

  <div class="box" id="here">

    <button>Отправить</button>
  </div>
</body>

Результат:

БЛОГ НА HUSL

Вставить таблицу в div блок при помощи js

Ответы (2 шт):