returning DOM element objects as a string?
Question by Thomas T
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 by KooiInc
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>
Answer by Starx
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;
}
