How to use apex:dynamicComponent in visualforce page to generate DOM elements at run time

Ok so today I am sharing the code for how to generate apex component dynamically. Salesforce has introduced a new feature call as "apex:dynamicComponent", what this does is it will introduce visualforce markup in the page from controller just like a dynamic binging.

To do this use this in the visualforce page:

<apex:dynamicComponent componentValue="{!outPanel}"/>

Now in the class write this:

Public transient Component.Apex.OutputPanel outPanel{get;set;}

Public List<sObject> vNewLst{get;set;}

public void getdynPan(){      

vNewLst = database.query('Select Id,Name from Account limit 100');    

outPanel = new Component.Apex.OutputPanel();   

Component.Apex.DataTable datatable = new
Component.Apex.DataTable(var='row');    

datatable.expressions.value='{!vNewLst}';    

list<String> displayFieldLst= new list<String>{'Id','Name'};    

Component.Apex.column clm;   

Component.Apex.OutputText outText;      

  for(string s: displayFieldLst){          

    clm = new Component.Apex.column(headerValue= '' + s + '');         

    outText = new Component.Apex.OutputText();          

    outText.expressions.value = '{!row[\'' + s + '\']}';         

    clm.childComponents.add( outText );      

    datatable.childComponents.add( clm );

  }  

  outPanel.childComponents.add( datatable );

}

What this code will do it will create a output panel and bind a datatable inside it with Id and Name columns and then display it on the page.

Hope this will help you!!