Skip the mark-up: dojo.body, create and place

For those that have wondered, “How can I create a design that requires no HTML mark-up within the body?” The answer lies with 3 essential functions in the Dojo core:

For fun, let’s programmatically create a drag-and-drop (DnD) list on the page:

dojo.require("dojo.dnd.Source");
dojo.addOnLoad(function(){
 
                                var header = dojo.create('h2');
                dojo.place(header, dojo.body());
                header.innerHTML = 'Fruit List';
 
                                var listContainer = dojo.create('div', {'class':'listContainer'});
                dojo.place(listContainer, dojo.body());
 
                                var fruitList = dojo.create('ol', {'id':'fruitList'});
                dojo.place(fruitList, listContainer);
 
                fruitList  = new dojo.dnd.Source('fruitList');
                fruitList.insertNodes(false, [
                                "Limes",
                                "Apples",
                                "Lemons",
                                "Oranges",
                                "Pears",
                                "Bananas",
                                "Mangos",
                                "Passion Fruit",
                                "Stawberries",
                                "Lulos"
                                ]);
 
});

Here, we’ve created three elements and have placed them within the body. Should you want to explore more, click on the links for dojo.body(), dojo.create() and dojo.place(). For an excellent DnD tutorial, check out: Dojo Drag and Drop, Part 1: dojo.dnd