Question

tl;dr: How do I get a DOM element, that is made visible by a click handler, to be the last element before close of body even if dynamically generated elements are being appended?

Essentially I want to have the click that opens the element also move it in the DOM to be last before body close even after some dynamic elements have been appended.

---

My issue stems from a modal that is being opened within another modal while there are multiple modals on one page. One catch is that the submodals exist in the DOM at page load while the primary modals are being instantiated onclick (the submodals use different code to generate while the primary ones use jQuery UI dialog).

If you open a modal and then open the submodal all is well. If you open a second modal then close it when you reopen that first modal the submodal will not appear as it is hidden below the second modal. If I append these submodals to the body, thus putting them after any generated modals they appear fine (but that creates other issues). In spite of what it looks like this does not appear to be a z-index problem (I’ve tried everything related to that with no luck), it appears to be related to where these modals are positioned in the DOM.

Code might be clearer:

This is what the html looks like on page load:

<div id='submodal_1' class='submodal'>foo</div>
<div id='submodal_2' class='submodal'>bar</div>
</body>

After you click to open the first primary modal window:

<div id='submodal_1'>subfoo</div>
<div id='submodal_2'>subbar</div>
<div id='primary_modal_1' class='ui-dialog' style='display:block'>foo</div>
</body>

After you click to open that modal’s submodal I have to move the submodal to be below the primary modal otherwise it will not appear (and again, z-index does not effect this blocking):

$('#submodal_1').insertAfter('#primary_modal_1');

At this point if you close that #primary_modal_1 it will be hidden but still there in the DOM. If you open a second the code will now look like:

<div id='submodal_2' class='submodal'>subbar</div>
<div id='primary_modal_1' class='ui-dialog' style='display:none'>foo</div>
<div id='submodal_1' class='submodal'>subfoo</div>
<div id='primary_modal_2' class='ui-dialog' style='display:block'>bar</div>
</body>

At this point if you reopen the first primary modal and try to open its submodal the submodal will not appear. However if you move the submodal to be below that last primary modal, like so:

<div id='submodal_2' class='submodal'>subbar</div>
<div id='primary_modal_1' class='ui-dialog' style='display:block'>foo</div>
<div id='primary_modal_2' class='ui-dialog' style='display:none'>bar</div>
<div id='submodal_1' class='submodal'>subfoo</div> //<-- moved this line
</body>

The submodal will apear correctly. I want to ensure that the submodals are always last in the DOM, regardless of how many primary modals are appended.

Answer 1

The append method of JQuery “Insert content, specified by the parameter, to the end of each element in the set of matched elements.”

$('body').append(...);

You’ll have to move the element each time something is added dynamically.

Check this JSFiddle:
http://jsfiddle.net/eZ2Dq/