2

I've a function that takes an object as a parameter, and uses the structure of the object to create nested DOM nodes, but I receive the following error:

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.

What I would like my function to do, is, when supplied with a suitable object as a parameter, example:

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

It would create the following DOM nodes:

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

Here is my attempt so far:

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

I'm already struggling!

Ideally I'd like to eventually add more child key's to each object, not just tag, but also id, innerHTML, class etc.

Any hel would be much appreciated, though please: I'm sure a framework or library could do this for me in just a few lines of code, or something similar, but I'd prefer not to use one for this particular project.

If you could briefly explain your answers too it'd really help me learn how this all works, and where I went wrong!

Thank you!

NB: I've changed and marked the line in my function that the error message is talking about.

I changed it from:

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

to:

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

This is because I want any nested keys in the children object to also be created, so screen_name had a children key, they too would be created. Sorry, I hope you can understand this!

I'm looking at http://jsperf.com/create-nested-dom-structure for some pointers, this may help you too!

Improve this question
2
  • are you calling this like: create(nodes);? Commented Nov 17, 2010 at 15:27
  • Since your "create" function already knows how to iterate, why iterate again over the children? Commented Nov 17, 2010 at 15:51

3 Answers 3

Reset to default
2

Your "create" function is going to have to be written recursively.

To create a node from your data (in general), you need to:

  1. Find the "tag" property and create a new element
  2. Give the element the "id" value of the element (taken from the data)
  3. For each element in "children", make a node and append it

Thus:

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

That will return an array of document elements created from the original "specification" object. Thus from your example, you'd call:

var createdNodes = create(nodes);

and "createdNodes" would be an array of one element, an <article> tag with id "tweets". That element would have two children, an <h2> tag with id "screen_name" and a <p> tag with id "text". (Now that I think of it, you might want to skip the "id" assignment unless the node description has an explicit "id" entry, or something.)

Thus if you have a <div> in your page called "tweets" (to use your example, though if so you'd definitely want to cut out the "id" setting part of my function), you'd add the results like this:

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

for (var eindex = 0; eindex < createdNodes.length; ++eindex)
  tweets.appendChild(createdNodes[eindex]);
Improve this answer
Sign up to request clarification or add additional context in comments.

16 Comments

He did not indicate that children would have children.
No, but there are children on the outer node, so one might expect that the general representation would be that a node can contain a "tag" property and a "children" property. (There might need to be a <span> or an <em> or something inside the <p>, for example.)
@Josiah: Thank you for your help so far, I apologise for not being more specific. Kudos to you!
Well @Jonathon It's just going to be a terrible mess if you want to have children with children, as you've already said you might have, if you don't write it recursively. The recursive version will be much less code than some iterated version, which would require you to hard-code another level of loop for each level of nesting your structure might have. If you write it recursively, it'll handle any such structure.
@Josiah I'm hoping there's a "Epic text per vote ratio" badge :-)
|
0

I added a function appendList that accepts a list of elements, and the container to append to. I removed the append to "tweets" part out of the create function to more effectively separate your code.

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"));
Improve this answer

2 Comments

Thanks for the help, I think that still wouldn't work as I'd be appending a a string (the value of children[prop].tag) and not an element. Furthermore, any child keys nested inside <code>children[prop]</code> would not be appended. I hope this is clear enough, I've updated my question to be more specific too.
Yah. you clearly need to recursively call the function in this case. I'll update the answer.
-1

Building on the previous answer: I think you still need to create the element you're trying to append:

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

should be

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);  
    };  
};
Improve this answer

6 Comments

What if some of the children nodes have children?
you copied my answer and then explained it in a way that doesn't makes sense. -1
i added on to your answer by specifying that you still needed to create the element you wanted to append.
Thank you both for your help so far, we're really getting somewhere with this I think, great collaboration guys!
@Ken - that should have been a comment
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.