Lightning creation of UI components dynamically (programmatically) failed

Question

Lightning creation of UI components dynamically (programmatically) failed We created a component with .cmp file with a section below:

<div aura:id="ElementHere"></div>

Then in the Helper JS class, we want to create ui:inputText control dynamically and place them at the div with aura:id="ElementHere":

createInputText : function(cmp, textLabel) {
    var componentConfig = {
            "componentDef": "markup://ui:inputText",
            "attributes": {
                "values": { label:textLabel, size:10, default:"enter text" }
            }
        };

       $A.componentService.newComponentAsync(
           this,
           function(newInputText){
               var divComponent = cmp.find("ElementHere");
               var divBody = divComponent.get("v.body");
               divBody.push(newInputText);
               divComponent.set("v.body", divBody);
           },
           componentConfig
    );
},

When we ran the app, we got a pop-up that complained that divComponent does not have get method.

Does anyone know if this is a bug, or we have missed some steps?

Answer 1

This works for me in Spring '15:

createTest.cmp:

<aura:component >
    <div aura:id="ElementHere"></div>
    <ui:button label="Create Input Text" press="{!c.createInputText}"/>
</aura:component>

createTestController.js

    ({
        createInputText : function(component, event, helper) {
            helper.createInputText(component, "Testing 123");
        }
    })

createTestHelper.js

({
    createInputText : function(cmp, textLabel) {
        var componentConfig = {
            "componentDef": "markup://ui:inputText",
            "attributes": {
                "values": { label:textLabel, size:10, default:"enter text" }
            }
        };

        $A.componentService.newComponentAsync(
            this,
            function(newInputText){
                var divComponent = cmp.find("ElementHere");
                var divBody = divComponent.get("v.body");
                divBody.push(newInputText);
                divComponent.set("v.body", divBody);
            },
            componentConfig
        );
    }
})

createTestApp.app

<aura:application >
    <aotp1:createTest/>
</aura:application>

Running it in the browser and pressing the button results in:

This is what I'd expect, so if it's not working for you, please post more details.