How to access a Container Node as a Node List for a custom dojo/dijit Widget

Question

I am trying to create a custom Templated Widget in dojo. I need to do some manipulation of the containerNode of the template and want to use the node as a dojo.NodeList. I cannot seem to get things to function like I want. For example, I need to be able to "push/pop/shift/unshift" children from the containerNode. If I do the following to "add" a child DOM Node it works:

var scrollPageItem = new _ScrollPageItem({...},"...");
this.containerNode.appendChild(scrollPageItem.domNode);

But this doesn't seem to work:

var scrollPageItem = new _ScrollPageItem({...},"...");
var nl = new dojo.NodeList(this.containerNode);
nl.push(scrollPageItem.domNode);

And neither does this:

var scrollPageItem = new _ScrollPageItem({...},"...");
var nl = new dojo.NodeList(this.containerNode.children);
nl.push(scrollPageItem.domNode);

In both the other cases, the nl.push seems to do nothing and browsing the DOM doesn't appear to add anything. Any thoughts on how to internally transform a dojoAttachPoint node into a dojo.NodeList?

Answer 1

dojo.NodeList is just a decorated array, so using the push() method on it just pushes the scrollPageItem.domNode into the dojo.NodeList's array, but does not add it into the DOM. Also, you can use dojo.query() and pass the node to create a new NodeList, it saves a bit of typing and you do not have to worry about forgetting "new":

dojo.query(this.containerNode).addContent(scrollPageItem.domNode);

Or, the more direct, non-dojo.NodeList route:

dojo.place(scrollPageItem.domNode, this.containerNode);