title: How do I get the innerHTML of a part of my page when that inner HTML is generated by a Javascript function?
body: <p>I have a function <code>getsWeather</code> which uses the SimpleWeather framework. That function is as follows: </p>
  
  <pre><code>function getsWeather(city, unitMes) {
      $.simpleWeather({
          location: city,
          woeid: '',
          unit: unitMes,
  
      success: function(weather) {
  
          // ---- For testing the weather code ----
          //alert(weather.code);
          //alert(weather.currently);
          //alert(weather.forecast[1].code);
  
          var conditionArr0 = conditionsImage(weather.code);
          var conditionArr1 = conditionsImage(weather.forecast[1].code);
          var conditionArr2 = conditionsImage(weather.forecast[2].code);
          var conditionArr3 = conditionsImage(weather.forecast[3].code);
  
          loc =   weather.city + ', ' + weather.region;
          html = '&lt;h3&gt;Now&lt;/h3&gt;&lt;p&gt;'+returnsDate()+'&lt;/p&gt;&lt;p id="city-reading"&gt;' + weather.city + ', ' + weather.region + '&lt;/p&gt;';
          html += '&lt;div class="icon ' + conditionArr0[0] + '"&gt;&lt;/div&gt;';
          html += '&lt;i class="icon-'+weather.code+'"&gt;&lt;/i&gt;&lt;h2 id="temperature-reading"&gt;'+weather.temp+'&amp;deg;'+weather.units.temp+'&lt;/h2&gt;';
          html += '&lt;h6 class="currently"&gt;'+weather.currently+'&lt;/h6&gt;';
  
          forecast1 = '&lt;h4&gt;' + weather.forecast[1].day + '&lt;/h4&gt;';
          forecast1 += '&lt;div class="icon-sm ' + conditionArr1[0] + '"&gt;&lt;/div&gt;';
          forecast1 += '&lt;h5&gt;H: ' + weather.forecast[1].high + '&lt;/h5&gt;';
          forecast1 += '&lt;h5&gt;L: ' + weather.forecast[1].low + '&lt;/h5&gt;';
  
          forecast2 = '&lt;h4&gt;' + weather.forecast[2].day + '&lt;/h4&gt;';
          forecast2 += '&lt;div class="icon-sm ' + conditionArr2[0] + '"&gt;&lt;/div&gt;';
          forecast2 += '&lt;h5&gt;H: ' + weather.forecast[2].high + '&lt;/h5&gt;';
          forecast2 += '&lt;h5&gt;L: ' + weather.forecast[2].low + '&lt;/h5&gt;';
  
          forecast3 = '&lt;h4&gt;' + weather.forecast[3].day + '&lt;/h4&gt;';
          forecast3 += '&lt;div class="icon-sm ' + conditionArr3[0] + '"&gt;&lt;/div&gt;';
          forecast3 += '&lt;h5&gt;H: ' + weather.forecast[3].high + '&lt;/h5&gt;';
          forecast3 += '&lt;h5&gt;L: ' + weather.forecast[3].low + '&lt;/h5&gt;';
  
          //$("input[name=locSearch]").val(loc);
          $("#weather").html(html);
          $(".today").css('background-color', conditionArr0[1]);
          $("#1").html(forecast1);
          $("#2").html(forecast2);
          $("#3").html(forecast3);
      },
      error: function(error) {
          loc =   '&lt;h5&gt;&lt;button id="search"&gt;&lt;i class="fa fa-search" id="search-icon"&gt;&lt;/i&gt;&lt;/button&gt;&lt;/h5&gt;';
          html = '&lt;p&gt;Today&lt;/p&gt;&lt;p&gt;&lt;strong&gt;'+returnsDate()+'&lt;/strong&gt;&lt;/p&gt;';
          html += '&lt;div class="icon ' + ' ' + '"&gt;&lt;/div&gt;';
          html += '&lt;h2&gt;&lt;strong&gt;&lt;i class="icon-'+ ' ' +'"&gt;&lt;/i&gt; '+weather.temp+'&amp;deg;'+weather.units.temp+'&lt;/strong&gt;&lt;/h2&gt;';
          html += '&lt;h6 class="currently"&gt;'+ ' ' +'&lt;/h6&gt;';
          $("#location").html(loc);
          $("#weather").html(html);
          $(".today").css('background-color', conditionArr0[1]);
      }
    });
  }
  </code></pre>
  
  <p>I just want to pull the <code>weather.city</code> from this function but I don't know how to really do that.</p>
  
  <p>I'm trying to do it with this <code>var currentLocation = document.getElementById("city-reading").innerHTML;</code> but that doesn't work and I'm assuming it's because the code hasn't been generated yet for me to pull from? Is there an easier way to do this? </p>