Javascript 是否将DOM元素对象作为字符串返回？

我不知道如何表达我的问题，所以我将发布我的代码并解释我正在尝试做什么：

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

    return newElement;
}

如果我打电话

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

我只是

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

[对象HTMLSpanElement]

所以我的问题是，我如何写这个来返回一个字符串，而不进行转换（可能是昂贵的操作？）或者用字符串进行犹太区修补

更新： 犹太人区补丁版本：

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

函数getNewElement（标记名、类名、idName、文本）{ 返回“”+文本+“”； }

---

实现了我想要的功能，但我觉得它没有那么优雅。

请尝试

appendChild

而不是

innerHTML

newElement.appendChild（文本）

编辑：这就是你想要实现的吗

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

---

不确定，但是如果您希望在新元素

#meow1

中使用语句来显示

#meow2

的内容，那么这将是一个解决方案：

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;
}

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;
}

现在

将创建一个新元素

#meow1

，其内容为新创建的元素

#meow2

。在文档中的某个位置附加如下内容：

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

现在，如果你愿意：

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

结果是：

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

布拉布拉布拉赫

将函数更改为在参数中输入多个类型

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;
}

---

appendChild（）需要document.createTextNode（），这给了我相同的结果。也许我没有正确理解您的要求。我对我的答案进行了编辑，这就是你想要的吗？我想如果你真的想要一个

HTMLElement

作为结果，你需要说。类似于上面的解决方案，但有更多细节！谢谢具体来说，我确实想让#meow2成为#meow1的孩子，我还想问，与此相比，我的更新中的贫民区补丁解决方案在性能上有什么缺点吗？你的补丁创建了一个字符串，你仍然需要在某些元素中使用

innerHTML

，将其添加到DOM中。因此它不会在DOM中创建元素。一般来说，

innerHTML

s的性能应该与使用DOM方法没有太大区别-顺便说一句，你说的“ghetto补丁”是什么意思？我说的ghetto补丁只是为了获得一些效果而进行了一些不太好的黑客攻击，并不是最优雅的解决方案。谢谢你的回复！

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;
}