title: returning DOM element objects as a string?
body: <p>I'm not sure how to phrase my question, so I'll just post my code and explain what I'm trying to do:</p>
  
  <pre><code>function getNewElement(tagName, className, idName, text){
      var newElement = document.createElement(tagName);
      newElement.className = className;
      newElement.id = idName;
      newElement.innerHTML = text;
  
      return newElement;
  }
  </code></pre>
  
  <p>If I call</p>
  
  <pre><code>getNewElement("div", "meow", "meow1", getNewElement("span","meow", "meow2", "blahblahblah"));
  </code></pre>
  
  <p>I just get</p>
  
  <pre><code>&lt;div id="meow1" class="meow"&gt;[object HTMLSpanElement]&lt;/div&gt;
  </code></pre>
  
  <p>So my question is, how would I write this to return a string with out converting (potentially expensive operation?) or ghetto patching with strings.</p>
  
  <p>Update:
  ghetto patch version: </p>
  
  <pre><code>function getNewElement(tagName, className, idName, text){
      return '&lt;' + tagName + ' class=' + className + ' id=' + idName + '&gt;' + text + '&lt;/' + tagName + '&gt;';     
  }
  </code></pre>
  
  <p>Achieves the functionality I wanted, but I feel like it's not that elegant.</p>