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

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

You can download the code here: dojobodycreateplace.html.

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

Tags: , ,

This entry was posted on Thursday, April 8th, 2010 at 1:36 pm and is filed under Dojo Cookies. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

2 Responses to “Skip the mark-up: dojo.body, create and place”

  1. Eugene Lazutkin Says:

    Even more compact creation of 3 elements:

    dojo.create(’h2′, {innerHTML: ‘Fruit List’}, dojo.body());
    dojo.create(’div’, {’class’:'listContainer’}, dojo.body());
    dojo.create(’ol’, {’id’:'fruitList’}, listContainer);

    The rest is unchanged.

  2. gtducati Says:

    Thanks Eugene. Of course, for the sake of featuring dojo.place(), the extended example was shown. As always, it’s a good idea to keep your code compact when you can.

Leave a Reply

You must be logged in to post a comment.