title: Append image to <td> via jquery
body: <p>I'm struggling with an issue appending an image to an <code>&lt;td&gt;</code>-element . Unfortunately I'm not able to show you an complete jsfiddle (values-calculation is rather complex), but I hope some code snippets are enough.</p>
  
  <p>Table-Structure:</p>
  
  <pre><code>var table = createElement('table');
  var header = table.createTHead();
  var row = header.insertRow(0);
  var cell0 = row.insertCell(0);
  cell0.innerHTML = "Indikator"
  var cell1 = row.insertCell(1);
  cell1.innerHTML = "In dieser Region"
  var cell2 = row.insertCell(2);
  cell2.innerHTML = "Alle Regionen: Höchster Werte"
  var cell3 = row.insertCell(3);
  cell3.innerHTML = "Alle Regionen: Niedrigster Werte"
  var cell4 = row.insertCell(4);
  cell4.innerHTML = "Alle Regionen: Durchschnitt"
  var cell5 = row.insertCell(5);
  cell5.innerHTML = "Bewertung";
  tbody = table.appendChild(document.createElement('tbody'));
  </code></pre>
  
  <p>Then I'm using a for-loop, where the rest of the table is created:</p>
  
  <pre><code>for (var key in values) {
      //...
      //method to calculate some values
      ...
      //append values to tbody
      $(table).find(tbody).append("&lt;tr&gt;");
      $(table).find(tbody).append( "&lt;td&gt;"+(indicatorValue)+"&lt;/td&gt;");
      $(table).find(tbody).append( "&lt;td&gt;"+(regionValue)+"&lt;/td&gt;");
      $(table).find(tbody).append( "&lt;td&gt;"+(bestValues)+"&lt;/td&gt;");
      $(table).find(tbody).append( "&lt;td&gt;"+(worstValues)+"&lt;/td&gt;");
      $(table).find(tbody).append( "&lt;td&gt;"+(average)+"&lt;/td&gt;");
      $(table).find(tbody).append( "&lt;td&gt;"+ createIndicator(picIdentifier));
  }
  </code></pre>
  
  <p>All the methods are working properly, but I have some issues with the last part, the <strong>createIndicator(picIdentifier)</strong>, which is used to refer to the image source.</p>
  
  <pre><code>function createIndicator(state) {
      var img = document.createElement('img');
      if (picIdentifier == 'green') {
          img.src = "img/green_circle.png";
      } else {
          img.src = 'img/red_circle.png';
      }
      return img;
  }
  </code></pre>
  
  <p>Coming to my problem: The images are not created, but it's only stated <code>[object HTMLImageElement]</code> for each cell, where the image should be located. You can check it here: <a href="http://imgur.com/WAtplY7" rel="nofollow">http://imgur.com/WAtplY7</a></p>
  
  <p>I've tried some workarounds, and also come to an result, where the images will be created by using <code>$(table).find(tbody).append(createIndicator(picIdentifier));</code> but with this I do not create the images in table-cells. Check it here, how it looks: <a href="http://imgur.com/7POq3wn" rel="nofollow">http://imgur.com/7POq3wn</a>  </p>
  
  <p>Would be awesome to get some tips from you :)</p>