title: Render HTML returned through AJAX call in JavaScript
body: <p>I am a complete novice in the JavaScript and AJAX stuff. I am trying to make a call to the server using AJAX and display the returned HTML. However instead of rendering the HTML, the browser displays the HTML code. I am not using JQuery and I would prefer not using it (an acute shortage of time and my complete unfamiliarity with JQuery are two major reasons for sticking to basic JavaScript). Is there some way to render the HTML as it is supposed to be using just the basic JavaScript. Here is my code</p>
  
  <pre><code>function gotoNext(button){
  try {
      xmlHttp = new XMLHttpRequest ();
  }
  catch (e) {
      try {
          xmlHttp = new ActiveXObject ("Microsoft.XMLHTTP");
      }
      catch (el) {
          try {
              xmlHttp = new ActiveXObject ("Msxml2.XMLHTTP");
          }
          catch (el1) {
              alert ("Your browser does not support AJAX! Please use a compatible browser!!");
          }
      }
  }
  
  xmlHttp.onreadystatechange = function () {
      if (xmlHttp.readyState == 4 &amp;&amp; xmlHttp.status == 200) {
          var df = document.getElementById ("dataForm");
          var data = xmlHttp.responseText;
          df.innerText = data;
      }       
  };
  
  var id = document.editEnv.id.value;
  var sId = document.editEnv.sId.value;
  var fileName = document.editEnv.fileName.value;
  var group = document.editEnv.group.value;
  
  xmlHttp.open("POST", "newData.jsp", true);
  xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");
  xmlHttp.send ("flag=" + flag + "&amp;id=" + id + "&amp;sId=" + sId + "&amp;fileName=" + fileName + "&amp;group=" + group);
  </code></pre>