dojo - How to get node by Id if it has not been added to the dom yet?

Question

I am working on a custom dojo widget that includes a Dialog. The Dialog content is loaded as text from a template html file. The issue I am having is that I need to add dom nodes to the Dialog content before the Dialog is added to the dom.

Here is my template (DialogContent.html):

<div>
    <table>
        <tbody>
            <tr>
                <td>
                    <label for="printTitle">Map Title:</label>
                </td>
                <td>
                    <input id="printTitle" data-dojo-type="dijit/form/TextBox" name="title" />
                </td>
            </tr>
            <tr>
                <td>
                    <label for="printOrientation">Page Orientation:</label>
                </td>
                <td>
                    <select id="printOrientation" data-dojo-type="dijit/form/FilteringSelect" name="orientation">
                        <option value="Letter ANSI A Landscape">Landscape</option>
                        <option value="Letter ANSI A Portrait">Portrait</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="printUnits">Scale Bar Units:</label>
                </td>
                <td>
                    <select id="printUnits" data-dojo-type="dijit/form/FilteringSelect" name="units">
                        <option value="Miles">Miles</option>
                        <option value="Kilometers">Kilometers</option>
                        <option value="Feet">Feet</option>
                        <option value="Meters">Meters</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="printLayers">Layers to Include in Legend:</label>
                </td>
                <td>
                     <select id="printLayers" data-dojo-type="dijit/form/MultiSelect" name="layers"></select>
                </td>
            </tr>
        </tbody>
    </table>
    <div>
        <button data-dojo-type="dijit/form/Button" type="submit">OK</button>
    </div>
</div>

Then I load the template as text into my widget with define([...,...,...,"dojo/text!./PrintWidget/templates/DialogContent.html"]...)

This comes in as a string variable, but I need to add the options under #printLayers dynamically. Because it is just a text string, I cannot work with it as a dom node. When I use domConstruct.toDom(dialogContent) it gets converted to an actual dom node that I can work with, but because the dom node has not actually been added to the DOM at this point (it's just a javascript dom object), I can't access #printLayers via dom.byId or dojo/query.

How can I access #printLayers within my template in order to dynamically add option elements?

Answer 1

So it turns out the solution was related to order of operations. I was unable to work with the dom node because it had not been added to the dom yet. It was just a javascript object. Once I created the Dialog and set the dom node as the content for the Dialog, the dom node was added into the dom and I could access #printLayers using dom.byId("printLayers").