title: How can I manipulate HTML elements which are added during the runtime?
body: <p>The code im working on first makes a call to the database. Through this call, it is determined wether there are available workstations in the office or not.
  If there are available workstations, "option" elements are added to a "select" element. This is achieved via jquery:</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>$('#idofselectelement').html(data)</code></pre>
  </div>
  </div>
  </p>
  
  <p>Where "data" represents the markup to be inserted into the "select" element. </p>
  
  <p>Now, my problem is that I'm trying to implement some code which checks wether your "favorite workstation" is available in the selected timeframe and then automatically preselects the respective workstation from the dropdownmenu in the "select" element. Everything is working so far, except for the selection of the workstation from the dropdown menu :/
  The part of 
  I'm rather new to programming with javascript and the HTML DOM, so I'm not sure whether the fact that the options im trying to chose from are added during the runtime?</p>
  
  <p>The code I've tried to manipulate the dropdown menu with is like this:</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-html lang-html prettyprint-override"><code>$('#idofselectelement').val(favoriteworkstation);</code></pre>
  </div>
  </div>
  </p>
  
  <p>However, as I said, this doesn't work. 
  I've also already tried to output (console.log) the select element's length property right after the code which adds the markup with the available options has run.
  But according to the output Im getting, the length is zero Oo 
  However, the dropdownmenu is definitely being created AND I can indeed manipulate it, but unfortunately not in the way I want to.
  If I add an onclick event which sets the value of the respective select element, then the value in the select field indeed changes to the value specified in the event handler. 
  So I wonder why I can't have the favorite workstation preselected after the timeframe was chosen...</p>
  
  <p>EDIT:
  For further insight into the problem, I'm adding a bit more code here.
  This is what the HTML Select element looks like BEFORE anything is added during the runtime:</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-html lang-html prettyprint-override"><code>&lt;label for="#sitz"&gt;Sitz Nr.&lt;/label&gt;
  &lt;select type="text" class="form-control" id="sitz" name="sitz" value=""&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>the markup which is added during the runtime</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-html lang-html prettyprint-override"><code>&lt;option&gt;workstationvalue&lt;/option&gt;
  &lt;option&gt;workstationvalue&lt;/option&gt;
  //and so on, depending on the situation...</code></pre>
  </div>
  </div>
  </p>