How to add a Dojo Button in Div dynamically by using Dojo?

http://stackoverflow.com/questions/14845702/how-to-add-a-dojo-button-in-div-dynamically-by-using-dojo

by schlomm

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8/dijit/themes/claro/claro.css">
<div id="parent1"></div>
<div id="parent2"></div>

CSS

body {
    padding: 30px;
}

JavaScript

require([
    "dojo/dom",
    "dojo/parser",
    "dijit/form/Button",
    "dojo/domReady!"
], function(
    dom,
    parser,
    Button
) {
    
    window.test = function() {
        console.log("Global `test` function", arguments);
    }
    
    function test() {
        console.log("Local `test` function", arguments);
    }
    
    // innerHTML
    var parent1 = dom.byId("parent1");
    parent1.innerHTML += '<input type="submit" data-dojo-type="dijit/form/Button" onClick="test(this)" id="btn1" label="Button 1">';
    parent1.innerHTML += '<input type="submit" data-dojo-type="dijit/form/Button" onClick="test(this)" id="btn2" label="Button 2">'; 
    parser.parse(parent1);
    
    // create dijits programmatically
    var parent2 = dom.byId("parent2");
    var button3 = new Button({ label: "Button 3" });
    button3.startup();
    button3.placeAt(parent2);
    button3.on("click", test);
    
    var button4 = new Button({ label:"Button 4"});
    button4.startup();
    button4.placeAt(parent2);
    button4.on("click", function(event) {
        test(this); // `this` === the button instance
    });

    
});