How to implement such a funcationality of adding child page on the fly ?

[adrianmak]

This is a mockup screen

A template with a field, in which to add child of reference to current page, a modal box will popup to add a child page.

[Macrura]

that would be a pagetable field.

[adrianmak]

is it able to display field with html formatted output ?

[Macrura]

that's a good question, i'm not sure, but maybe as a quick fix you could use some jQuery (e.g. using admin custom files) to parse that into formatted html

[adrian]

is it able to display field with html formatted output ?

That would be PageTableExtended

https://processwire.com/talk/topic/7459-module-pagetableextended/