Question

我不确定如何说出我的问题，所以我只是发布我的代码并解释我正在尝试做的事情：

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>

所以我的问题是，我怎么写这个来返回一个没有转换的字符串（可能是昂贵的操作？）或用字符串修补无法修补。

更新：贫民窟补丁版：

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

实现我想要的功能，但我觉得它并不那么优雅。

Answer 1

不确定，但如果您想要新元素#meow2中的#meow1内容，请使用该语句，这将是一个解决方案：

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

现在

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

将创建一个新元素#meow1，其中包含新创建的元素#meow2的内容。在文档的某处附加它看起来像：

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

否则，如果您希望#meow2成为#meow1的孩子，这将是一个解决方案：

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

现在，如果你愿意：

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>

Answer 2

而不是innerHTML，请尝试appendChild。

newElement.appendChild（文本）;

编辑：这是你想要实现的目标吗？

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

Answer 3

将您的函数更改为在参数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;
}

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

3 个答案: