Question

I’m not sure how to phrase my question, so I’ll just post my code and explain what I’m trying to do:

function getNewElement(tagName, className, idName, text){
    var newElement = document.createElement(tagName);
    newElement.className = className;
    newElement.id = idName;
    newElement.innerHTML = text;

    return newElement;
}

If I call

getNewElement("div", "meow", "meow1", getNewElement("span","meow", "meow2", "blahblahblah"));

I just get

<div id="meow1" class="meow">[object HTMLSpanElement]</div>

So my question is, how would I write this to return a string with out converting (potentially expensive operation?) or ghetto patching with strings.

Update:
ghetto patch version:

function getNewElement(tagName, className, idName, text){
    return '<' + tagName + ' class=' + className + ' id=' + idName + '>' + text + '</' + tagName + '>';     
}

Achieves the functionality I wanted, but I feel like it’s not that elegant.

Answer 1

Not sure, but if you want the contents of #meow2 in the new element #meow1, using the statement as you do, this would be a solution:

function getNewElement(tagName, className, idName, contents){
    var newElement = document.createElement(tagName);
    newElement.className = className;
    newElement.id = idName;
    newElement.innerHTML = 
          typeof contents === 'string' ? contents : contents.innerHTML;
    return newElement;
}

now

getNewElement("div", "meow", "meow1", 
              getNewElement("span","meow", "meow2", "blahblahblah"));

would create a new element #meow1, with the content of a newly created element #meow2. Appended somewhere in the document it would look like:

<div class="meow" id="meow1">blahblahblah</div>

Otherwise, if you want #meow2 to be a child of #meow1, this would be a solution:

function getNewElement(tagName, className, idName, contents){
    var newElement = document.createElement(tagName);
    newElement.className = className;
    newElement.id = idName;
    if (typeof contents === 'string'){
      newElement.innerHTML = contents;
    } else {
      newElement.appendChild(contents);
    }
    return newElement;
}

Now if you would do:

document.body.appendChild(
     getNewElement("div", "meow", "meow1", 
                   getNewElement("span","meow", "meow2", "blahblahblah"))
);

this would be the result:

 <div class="meow" id="meow1">
  <span class="meow" id="meow2">blahblahblah</span>
 </div>