title: JavaScript how to wait an other java script to be resolved first
body: <p>I'm facing an issue with async java script. This is my html</p>
  <pre><code>&lt;html&gt;
     &lt;head&gt;
         &lt;script src=&quot;/headScript.js&quot;&gt;&lt;/script&gt;
     &lt;/head&gt;
    &lt;body&gt;
        &lt;div id=&quot;inner_id&quot; class=&quot;sample&quot;&gt; &lt;/div&gt;
        ...
        &lt;script src=&quot;/anOtherScript.js&quot;&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p><em>/headScript.js</em></p>
  <pre><code>  $(document).ready(function () {
    var target=$('#inner_id'); 
      $.ajax({                                                                 
          method: 'GET',
          url: '/example',
          success: function (result) {
                  var el= document.createElement('span');
                  el.id=&quot;new_element&quot;;              
                  el.setAttribute('name', 'element');
                  el.setAttribute('content', result);
                  target.append(el)
          }
      });
    });
  </code></pre>
  <p><em>/anOtherScript.js</em></p>
  <pre><code> $(document).ready(function () {
     console.log($('#new_element));
   });
  </code></pre>
  <p>the script from header create the new div but it seems that these two script are running asynchronously and at the console i get undefined. Is there any way that  (anOtherScript) can wait the first one to be resolved first?</p>
  <ul>
  <li>i cant change anything to html file</li>
  <li>files that I'm able to make changes are the 2 scripts</li>
  </ul>