Question

我的目标是在它旁边显示输入字段和跨度。为了达到这个目的，我在父元素中生成了两个div（在基础框架的“row”中有两个“小6列”）。

如果我选择.appendChild（el）和.appendChild（span），它就可以了。当我想把div放在工作中时，我得到了[object HTMLDivElement] [object HTMLDivElement]作为结果。

我尝试了$（ldiv）.html（）和许多变体，但我无法弄明白。

感谢您的回复

var cellRight = row.insertCell(1);
          var div = document.createElement('div');
          div.class = 'row';
          //
          var el = document.createElement('input');
          el.type = 'text';
          el.name = 'produkty_mnozstvi_jednotek' + iteration;
          el.id = 'produkty_mnozstvi_jednotek' + iteration;
          el.style.width = '3.5rem';
          //
          var ldiv = document.createElement('div');
          ldiv.class = 'small-6 columns';
          ldiv.id = 'ldiv' + iteration;
          ldiv.innerHTML = el;
          //
          var span = document.createElement('span');
          span.id = 'naskladneni_mnozstvi_jednotek' + iteration;
          //
          var rdiv = document.createElement('div');
          rdiv.class = 'small-6 columns';
          rdiv.id = 'rdiv' + iteration;
          rdiv.innerHTML = span;
          //
          div.innerHTML = div.innerHTML + ldiv + rdiv; 
          //
          cellRight.appendChild(div);
          //cellRight.appendChild(el);
          //cellRight.appendChild(span); //works fine but divs are ignored and span in under the input, not next to it (workaround)

Answer 1

使用appendChild而不是innerHTML。也许它可以帮助你：

function run() {
  var row = document.getElementById('row');
  var cellRight = row.insertCell();
  var div = document.createElement('div');
  div.class = 'row';

  var el = document.createElement('input');
  el.type = 'text';
  el.name = 'produkty_mnozstvi_jednotek' + iteration;
  el.id = 'produkty_mnozstvi_jednotek' + iteration;
  el.style.width = '3.5rem';
  //
  var el = document.createElement('input');
  el.type = 'text';
  el.name = 'produkty_mnozstvi_jednotek' + iteration;
  el.id = 'produkty_mnozstvi_jednotek' + iteration;
  el.style.width = '3.5rem';
  //
  var ldiv = document.createElement('div');
  ldiv.class = 'small-6 columns';
  ldiv.id = 'ldiv' + iteration;
  ldiv.appendChild(el);
  //
  var span = document.createElement('span');
  span.id = 'naskladneni_mnozstvi_jednotek' + iteration;
  //
  var rdiv = document.createElement('div');
  rdiv.class = 'small-6 columns';
  rdiv.id = 'rdiv' + iteration;
  rdiv.appendChild(span);
  //
  div.appendChild(ldiv);
  div.appendChild(rdiv);
  cellRight.appendChild(div);
}

Answer 2

找到解决方案正确使用appendChild（）

var tbl = document.getElementById('tblProdukty');
          var lastRow = tbl.rows.length;
          var iteration = lastRow;
          var row = tbl.insertRow(lastRow);

          // left cell
          var cellLeft = row.insertCell(0);
          var textNode = document.createTextNode(iteration);
          cellLeft.appendChild(textNode);

          // jednotka bunka
          var cellRight = row.insertCell(1);
          var div = document.createElement('div');
          div.class = 'row';
          //
          var el = document.createElement('input');
          el.type = 'text';
          el.name = 'objednavka_mnozstvi_jednotek' + iteration;
          el.id = 'objednavka_mnozstvi_jednotek' + iteration;
          el.style.width = '3.5rem';
          //
          var ldiv = document.createElement('div');
          ldiv.class = 'small-6 columns';
          ldiv.id = 'ldiv' + iteration;
          ldiv.appendChild(el);
          //
          var span = document.createElement('span');
          span.name = 'naskladneni_mnozstvi_jednotek' + iteration;
          span.id = 'naskladneni_mnozstvi_jednotek' + iteration;
          //
          var rdiv = document.createElement('div');
          rdiv.class = 'small-6 columns';
          rdiv.id = 'rdiv' + iteration;
          rdiv.appendChild(span);
          //
          div.appendChild(ldiv);
          div.appendChild(rdiv);
          //
          cellRight.appendChild(div);

显示[object HTMLDivElement]的内容

2 个答案: