title: Google reCaptcha within SweetAlert modal window
body: <p>I'm working on a function which requires doing a reCaptcha verification within a SweetAlert popup box, but I'm getting the following error:</p>
  
  <blockquote>
    <p>Uncaught Error: reCAPTCHA placeholder element must be an element or id</p>
  </blockquote>
  
  <p>I've been looking into what's causing this error, and I notice it's because the element hasn't been loaded yet when it tries to generate the reCaptcha element.</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>function confirmBox() {
      var div = document.createElement('div');
      div.id = 'recaptcha';
      div.onload = genRecaptcha();
  
      swal({
          title: "Are you sure?",
          content: div,
          icon: "warning",
          buttons: true,
          dangerMode: true,
      })
  }
  
  function genRecaptcha() {
      console.log($('#recaptcha').attr('id'));
      grecaptcha.render('recaptcha', {
          'sitekey': '6Le2ZFUUAAAAAEV4IM_5weEnXg4gVplan2Atgiaj'
      });
  }
  
  $('#btn1').click(confirmBox);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://www.google.com/recaptcha/api.js"&gt;&lt;/script&gt;
  
  &lt;button id="btn1"&gt;Submit&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm trying to put the <code>genRecaptcha</code> function with the <code>onload</code> trigger, but it seems to be unable to get the element.</p>
  
  <p>Is there any way to execute the function after the popup box is fully loaded? Or there is something I did wrong here?</p>