CODEWITHSUNDEEP
javascripthtmldom
Thomas T
Thomas T

Reputation: 2381

returning DOM element objects as a string?

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.

Upvotes: 1

Views: 5559

Answers (3)

Starx
Starx

Reputation: 79049

Change your function to take multiple type in parameter text

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

Upvotes: 0

KooiInc
KooiInc

Reputation: 122986

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>

Upvotes: 2

Nadh
Nadh

Reputation: 7253

Instead of innerHTML, try appendChild.

newElement.appendChild(text);

EDIT: Is this what you are trying to achieve?

if(text instanceOf Object) {
    newElement.appendChild(text);
} else {
    newElement.createTextNode(text);
}

Upvotes: 1

Related Questions