My goal is to display input field and span right next to it. To achieve this I generate two divs inside a parent one (two "small-6 columns" inside "row" from foundation framework).

If I go for .appendChild(el) and .appendChild(span) it works. When I want to put the divs in work I get [object HTMLDivElement][object HTMLDivElement] printed as result.

I have tried $(ldiv).html() and many variations, but I just cant figure it out.

Thank you for response

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)

My goal is to display input field and span right next to it. To achieve this I generate two divs inside a parent one (two "small-6 columns" inside "row" from foundation framework).

If I go for .appendChild(el) and .appendChild(span) it works. When I want to put the divs in work I get [object HTMLDivElement][object HTMLDivElement] printed as result.

I have tried $(ldiv).html() and many variations, but I just cant figure it out.

Thank you for response

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)

• javascript
• jquery
• html

• 1 shouldn't this be div.innerHTML = div.innerHTML + ldiv.innerHTML + rdiv.innerHTML ; ? – Joy Biswas Commented Dec 7, 2015 at 14:05
• it slightly changes the printed result into [object HTMLInputElement][object HTMLSpanElement] – Pipet Filip Commented Dec 7, 2015 at 14:22

2 Answers 2

Use appendChild instead of innerHTML. Maybe it helps you:

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

found solution in correct use of 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);