在 javascript 中创建嵌套 dom 节点时遇到问题

Question

我有一个函数，它接受一个对象作为参数，并使用该对象的结构来创建嵌套的 DOM 节点，但我收到以下错误：

http://new.app/:75NOT_FOUND_ERR: DOM Exception 8: An attempt was made to reference a Node in a context where it does not exist.

我希望我的函数执行的操作是，当提供合适的对象时作为参数，示例：

var nodes = {
    tweet: {
        children: {
            screen_name: {
                tag: "h2"
            },
            text: {
                tag: "p"
            }
        },
        tag: "article"
    }
};

它将创建以下 DOM 节点：

<article>
    <h2></h2>
    <p></p>
</article>

这是我迄今为止的尝试：

function create(obj) {
    for(i in obj){  
        var tmp = document.createElement(obj[i].tag);  
        if(obj[i].children) {  
            tmp.appendChild(create(obj[i].children)); /* error */
        }; 
        document.getElementById("tweets").appendChild(tmp);  
    };  
};

我已经在挣扎了！

理想情况下，我希望最终为每个对象添加更多子键，不仅仅是 tag，还有 id、innerHTML、class 等。

不过，任何 hel 将不胜感激请：我确信框架或库只需几行代码或类似的代码即可为我完成此操作，但我不想使用它们对于这个特定的项目。

如果您也能简要解释一下您的答案，那将真正帮助我了解这一切是如何运作的以及我哪里出错了！

谢谢你！

注意：我已经更改并标记了函数中错误消息所涉及的行。

我将其从： 更改

mp.appendChild(obj[i].children);

为：

mp.appendChild(create(obj[i].children));

这是因为我希望也创建子对象中的任何嵌套键，因此 screen_name 有一个子键，它们也会被创建。 抱歉，希望您能理解！

我正在查看 http://jsperf.com/create-nested-dom-struct 对于一些提示，这也可能对您有帮助！

Answer 1

您的“创建”函数必须递归编写。

要从数据创建节点（通常），您需要：

1. 找到“tag”属性并创建一个新元素
2. 为该元素提供该元素的“id”值（从数据中获取）
3. 对于“children”中的每个元素"，创建一个节点并附加它

因此：

function create(elementDescription) {
  var nodes = [];
  for (var n in elementDescription) {
    if (!elementDescription.hasOwnProperty(n)) continue;
    var elem = elementDescription[n];
    var node = document.createElement(elem.tag);
    node.id = n; // optional step
    var cnodes = create(elem.children);
    for (var c = 0; c < cnodes.length; ++c)
      node.appendChild(cnodes[c]);
    nodes.push(node);
  }
  return nodes;
}

这将返回从原始“规范”对象创建的文档元素数组。因此，在您的示例中，您将调用：

var createdNodes = create(nodes);

并且“createdNodes”将是一个元素的数组，即一个 id 为“tweets”的

标记。该元素将有两个子元素，一个 id 为“screen_name”的

标记和一个 id 为“text”的

标记。 （现在我想起来了，您可能想跳过“id”分配，除非节点描述有明确的“id”条目或其他内容。）

因此，如果您有一个

在名为“tweets”的页面中（使用您的示例，但如果是这样，您肯定想删除我的函数的“id”设置部分），您将添加如下结果：

var createdNodes = create(nodes), tweets = document.getElementById('tweets');

for (var eindex = 0; eindex < createdNodes.length; ++eindex)
  tweets.appendChild(createdNodes[eindex]);

Answer 2

我添加了一个函数appendList，它接受元素列表以及要附加到的容器。我从创建函数中删除了“tweets”部分的附加部分，以更有效地分离您的代码。

function create(obj) {
    var els = [];
    for(i in obj){  
        var tmp = document.createElement(obj[i].tag);  
        var children;
        if(children = obj[i].children) {  
            var childEls = create(children);
            appendList(childEls, tmp);
        }
        els.push(tmp);
    }; 
    return els;
};
function appendList(list, container){
    for(var i = 0, el; el = list[i]; i++){
        container.appendChild(el);
    }
};
// gets an array of root elements populated with children
var els = create(nodes); 
// appends the array to "tweets"
appendList(els, document.getElementById("tweets")); 

Answer 3

基于之前的答案：
我认为您仍然需要创建要附加的元素：

tmp.appendChild(children[prop].tag);

应该是

tmp.appendChild(document.createElement(children[prop].tag));

function create(obj) {
    for(i in obj){  
        var tmp = document.createElement(obj[i].tag);  
        var children;
        if(children = obj[i].children) {  
            for(var prop in children)
                tmp.appendChild(document.createElement(children[prop].tag));   
        }
        document.getElementById("tweets").appendChild(tmp);  
    };  
};