javascript - 在 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等。

任何帮助将不胜感激，但请:我确信框架或库可以用几行代码或类似的东西为我做这件事，但是我不想为这个特定项目使用一个。

如果你也能简要解释一下你的答案，那真的会帮助我了解这一切是如何运作的，以及我哪里做错了!

谢谢!

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

我将其更改为:

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

到:

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

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

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

Answer 1

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

要从您的数据创建节点(通常)，您需要:

1. 找到“标签”属性并创建一个新元素
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”将是一个元素的数组，<article> ID 为“tweets”的标签。该元素将有两个 child ，一个 <h2> ID 为“screen_name”和 <p> 的标签ID为“文本”的标签。 (现在我想到了，您可能想跳过“id”赋值，除非节点描述有明确的“id”条目或其他内容。)

因此，如果你有一个 <div>在名为“tweets”的页面中(使用您的示例，但如果是这样，您肯定想删除我函数的“id”设置部分)，您将添加如下结果:

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

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