title: Console.log() Element Exists after JQuery but in HTML document, Element doesn't exist
body: <p>I am updating a select element in a modal with JQuery.  If I do a console.log, the element exists.
  <a href="https://i.stack.imgur.com/sRbC9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sRbC9.png" alt="enter image description here" /></a></p>
  <p>If I inspect element, it doesn't exist.</p>
  <p><a href="https://i.stack.imgur.com/dbk5X.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dbk5X.png" alt="enter image description here" /></a></p>
  <p>What could be causing the problem? The console.log is occurring after the JQuery has run which means it is working properly. If you don't do it in a modal, the code works fine, but if you do it in a modal, it doesn't append.</p>
  <p>What could bring about this behavior?</p>
  <p>Here is a sample code that works just fine but doesn't work in my computer.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var options = {
  'option1': {'display': 'Series A', 'optionsB': {'name': 'John', 'city': 'Doe'}},
  'option2': {'display': 'Series B', 'optionsB': {'name': 'Jane', 'city': 'Maria'}},
  }
  function updateOptions(){
     /* var options = $('#selectoptions').data('datasets') */;
     for (const opt1 in options) {
         $('#option1').append($('&lt;option&gt;', {
           value: opt1,
           text: options[opt1]['display']
            }))
          }
     
     $('#option1').on('click', function(){
     var option1 = $('#option1').val();
       for (const opt2 in options[option1]['optionsB']) {
           $('#option2').append($('&lt;option&gt;', {
             value: opt2,
             text: options[option1]['optionsB'][opt2]
              }))
            }
        })
  }
  $(function(){
  updateOptions();
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"&gt;
  &lt;script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;button type="button" id="examPle" data-bs-toggle="modal" data-bs-target="#exampleModal" class="btn btn-primary"&gt;Get Example&lt;/button&gt;
  
  &lt;div id="exampleModal" class="modal" tabindex="-1"&gt;
    &lt;div class="modal-dialog"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;h5 class="modal-title"&gt;Example Modal&lt;/h5&gt;
          &lt;button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"&gt;&lt;/button&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          &lt;form class="form" id="exampleform" name="exaple" method="post" required&gt; 
            &lt;div id="selectoptions"&gt;
              &lt;select id="option1" class="form-select form-select-sm mb-1"&gt;
                &lt;option value="..."&gt;Select Option 1&lt;/option&gt;
              &lt;/select&gt;
              &lt;select id="option2"  class="form-select form-select-sm mb-1"&gt;
                &lt;option value="..."&gt;Select Option 2&lt;/option&gt;
              &lt;/select&gt;
           &lt;/div&gt;
         &lt;/form&gt;
       &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>This is an edit to the question:
  The code above shows a minimal version. The whole code is a django application. I will edit the above html code to be</p>
  <pre><code>&lt;div class=&quot;modal-body&quot;&gt;
      &lt;!-- {% csrf_token %} --&gt;
      &lt;p&gt;Filter Collection&lt;/p&gt;
      &lt;div id=&quot;navpanel&quot; data-datasets=&quot;{{ datasets }}&quot;&gt;
      &lt;select id=&quot;option1&quot; class=&quot;form-select form-select-sm mb-1&quot;&gt;
          &lt;option value=&quot;...&quot;&gt;Select Map Type&lt;/option&gt;
      &lt;/select&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>The python views.py file has the following:</p>
  <pre><code>from .controls import datasets
  import json
  def maps(request):
      context = {
          'datasets': json.dumps(datasets),
      }
      return render(request, 'example.html', context)
  </code></pre>
  <p>The .controls sample is as follows</p>
  <pre><code>datasets = {
      'series1': {
          'display': 'This first Text',
          'options': {
              'series1A': {
                  'display' : 'This text for 1 A'
              },
              'series1B': {
                  'display' : 'This text for 1 B'
              },
          },
       },
  'series 2': {
          'display': 'This text',
          'options': {
              'series2A': {
                  'display': 'This next text of 2 A',
                     },
              'series2B': {
                  'display': 'This next text of 2 B'
                    },
                 },
              },
  }
  </code></pre>
  <p>And the javascript, you remove the var option variable and you changes it as follows:</p>
  <pre><code>function updateOptions(){
         var options = $('#selectoptions').data('datasets');
         for (const opt1 in options) {
             $('#option1').append($('&lt;option&gt;', {
               value: opt1,
               text: options[opt1]['display']
                }))
              }
         
         $('#option1').on('click', function(){
         var option1 = $('#option1').val();
           for (const opt2 in options[option1]['optionsB']) {
               $('#option2').append($('&lt;option&gt;', {
                 value: opt2,
                 text: options[option1]['optionsB'][opt2]['display']
                  }))
                }
            })
      }
      $(function(){
      updateOptions();
      });
  </code></pre>