title: Alternative to innerHTML
body: <p>I kind of feel like I'm abusing the DOM with my code...</p>
  
  <pre><code>for(var i=0; i&lt;json.length; ++i){       
      var newobj = document.createElement("div");
      var inner = "&lt;img src='"+json[i].picture+"' alt='Item preview' class='icon' /&gt;";
  
      inner += "&lt;p&gt;"+json[i].id+"&lt;br /&gt;qty:"+json[i].qty;
      inner += "&lt;a href=\"javascript:clearProduct('"+json[i].id+"')\"&gt;";
      inner += "&lt;img alt='Seperator' src='images/form-sep.gif' /&gt;";
      inner += "&lt;img src='images/cross.png' alt='Remove this item.' title='Remove this item.' /&gt;";
      inner += "&lt;/a&gt;&lt;/p&gt;";
      newobj.innerHTML = inner;
      newobj.className = "cart_item";
      $('cartitems').appendChild(newobj);
      $('cartcount').innerHTML = json.length;
  }
  </code></pre>
  
  <p>Is there a better way to do this? I mean, yes I could through and use createElement for each element and setting each attribute separately but that seems like a lot just when this is so simple. Is there a better way?</p>