title: How to wait until an element exists with JavaScript?
body: <p>I'm working with a <code>proxy object</code> where I detect a object value change and then load new content via AJAX, I use a <code>setInterval</code> function to wait until a the element that comes in the AJAX request exist and then execute a piece of code. I'm doing in this way because my case requires it. I made a short snippet example:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var handler = {
      makeThings: 0,
      otherStuff: 0
  };
  var globalHandler = new Proxy(handler, {
      set: function(obj, prop, value) {
          obj[prop] = value
          if (prop == "makeThings") {
              var clearTimeSearchProxy = setInterval(function() {
                  if ($("p").length) {
                      console.log("The element finally exist and we execute code");
                      clearTimeout(clearTimeSearchProxy);
                  }
              }, 100);
          }
          return true;
      }
  });
  
  $(document).ready(function() {
      $("button").on("click", function() {
          globalHandler.makeThings = 1;
          //This element comes with ajax but I use a setTimeout for this example
          setTimeout(function() {
              $("#newContent").append("&lt;p&gt;Ajax element&lt;/p&gt;");
          }, 2000);
      });
  });</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;body&gt;
    &lt;button&gt;New content&lt;/button&gt;
    &lt;div id="newContent"&gt;&lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Now I'm wondering about how to improve the code in a cleaner, efficient and elegant way. I was thinking of using <code>promises</code> instead of <code>setInterval</code> to execute a code when the element that comes via AJAX exists in the <code>DOM</code>.</p>
  
  <p>How can I make it work? Should I use other JavaScript functionality for this case instead of <code>promises</code>? I'm stuck with the promise to achieve what I need, this what I have tried so far. </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 handler = {
      makeThings: 0,
      otherStuff: 0
  };
  var globalHandler = new Proxy(handler, {
      set: function(obj, prop, value) {
          obj[prop] = value
          if (prop == "makeThings") {
              var myFirstPromise = new Promise((resolve, reject) =&gt; {
                  if ($("p").length) {
                      resolve("Exist");
                  } else {
                      reject("It doesnt exist.");
                  }
              });
  
              myFirstPromise.then((data) =&gt; {
                  console.log("Done " + data);
              }).catch((reason) =&gt; {
                  console.log("Handle rejected promise: " + reason);
              });
          }
          return true;
      }
  });
  
  $(document).ready(function() {
      $("button").on("click", function() {
          globalHandler.makeThings = 1;
          //This element comes with ajax but I use a setTimeout for this example
          setTimeout(function() {
              $("#newContent").append("&lt;p&gt;Ajax element&lt;/p&gt;");
          }, 2000);
      });
  });</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;body&gt;
    &lt;button&gt;New content&lt;/button&gt;
    &lt;div id="newContent"&gt;&lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>