You need to use ContentTemplateContainer
property to programmatically add or remove controls inside an UpdatePanel's ContentTemplate
.
In your scenario you should add both containing DIV's (DIV_Child's parent and DIV_NewParent) as well as DIV_Child to the ContentTemplateContainer's Controls collection in PageLoad: -
upd.ContentTemplateContainer.Controls.Add(DIV_OldParent);
upd.ContentTemplateContainer.Controls.Add(DIV_NewParent);
upd.ContentTemplateContainer.Controls.Add(DIV_Child);
The problem is occurring because your markup contains the div in its original position and style, and because it differs to what is submitted in a partial postback, the UpdatePanel is returning it as a change (simplified explanation).
Please give that a try.
I would usually recommend using an UpdatePanel for something quick and dirty, but for better performance instead use jQuery Ajax and a server-side HttpHandler. While this is (a bit) more work, it does give you better flexibility and you are guaranteed that nothing is going to interfere with the DOM section that is not inside an UpdatePanel.
I will concur that using UpdatePanels is a quicker development experience but they have a number of issues, not least of which is the fact that they post the ViewState back and forth with every partial postback, which is not very efficient.