title: $(id).html() not working in ajax success
body: <p>I would like to change the html text using <code>jquery</code> <code>ajax</code> that return <code>json array</code>. In the php file i use <code>echo</code> <code>json.encode()</code> to return the <code>json array object</code>. everything looks good in <code>console</code>. but when i tried to use the data to change text in html it does work. please help this lamo T.T   </p>
  
  <pre><code>  var request = $.ajax({
        url:"userEditChanges/submitTestRequirementModalForm.php",
        method:"POST",
        data:formData,
        dataType:"json",
  
        success:function(data)
        { 
          for (let index = 0; index &lt; data.length; index++) {
            console.log(data[index]);  
          }
          console.log(data);
          // $('#textreqline' ).html("lo")
          //document.getElementById("textreqline") return null.
          document.getElementById("textreqline").innerHTML = "hello";
        },
        error: function (jqXHR, textStatus, errorThrown) {
          console.log(jqXHR.responseText);
        }
        })
        });
  </code></pre>
  
  <p>getElementById return null in console. same goes with jquery selector. but if i write  </p>
  
  <pre><code>document.getElementById("textreqline").innerHTML = "hello";
  </code></pre>
  
  <p>or</p>
  
  <pre><code> $('#textreqline' ).html("lo");
  </code></pre>
  
  <p>outside the <code>ajax</code> success function the html text in page will change. it's like <code>ajax</code> preventing from their own selector from functioning. i also tried create a function with <code>.html()</code> in it and call at ajax success as function and still not working. </p>