javascript - display content of [object HTMLDivElement] - Stack Overflow

admin管理员组

文章数量:1344214

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

Share Improve this question Follow edited Dec 7, 2015 at 14:28 Pipet Filip asked Dec 7, 2015 at 14:00 Pipet FilipPipet Filip 6111 gold badge11 silver badge55 bronze badges 2

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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

本文标签： javascriptdisplay content of object HTMLDivElementStack Overflow