div element not found while using $A.createComponent [duplicate]

Question

I am trying to create a div using $A.createComponent but its throwing error.

`$A.createComponent("aura:HTML",
        { 
            "tag": "div",
            "HTMLAttributes":{"id": "filter-"+ component.get('v.index') +"", "Text":"Test"},
            "class":""
        },
        function(result, status, errorMessage){
             if (status === "SUCCESS") {
                $A.createComponents(components,
                                    function(components, status, errorMessage){
                                         if (status === "SUCCESS") {
                                           var divElement = document.getElementById("filter-" + component.get("v.index"));
                                           //var divElement = component.find(component.get('v.targetDiv'));
                                           console.log('Div element');
                                           var elementBody = divElement.get("v.body");
                                         }
                                     } 
                                    );
                       } 
         }
       );

Please ignore if any missing brackets are there I may have made mistake while copying it. It throws that divElement does not have get method or divElement is undefined. I know that component.find(component.get('v.index')) is trying to assign some value which never exist. how can I over come this situation?

Answer 1

$A.createComponent does not actually put the element in the DOM anywhere. result in your code is the div that was created, but you still need to put it somewhere.

In your second callback, you could refer to it directly:

result.set("v.body", components);

But don't forget to place it back into your component's body:

component.set("v.body", result);