1

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

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

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

4

3 回答 3

2

不确定，但如果你想要#meow2new element的内容#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>
于 2012-04-29T08:37:48.790 回答
1

而不是innerHTML，尝试appendChild。

newElement.appendChild(文本);

编辑：这是你想要达到的目标吗？

if(text instanceOf Object) {
    newElement.appendChild(text);
} else {
    newElement.createTextNode(text);
}
于 2012-04-29T08:27:40.967 回答
0

更改您的函数以采用多种类型的参数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;
}
于 2012-04-29T09:12:24.777 回答