AJAX как создать новый элемент?

Question

Я использовал онлайн-учебник о том, как использовать ajax для создания нового элемента, зависящего от ввода пользователей. На данный момент все, что он сделает, это заменить уже сделанный div's innerhtml, но я хотел бы создать новый div и заполнить его с помощью ввода, назначенного пользователем. Вот мой текущий код:

AJAX:

<script> 
    function showType(str) 
    { 
    if (str=="") 
     { 
     document.getElementById("Answer").innerHTML=""; 
     return; 
     } 
    if (window.XMLHttpRequest) 
     {// code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp=new XMLHttpRequest(); 
     } 
    else 
     {// code for IE6, IE5 
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
    xmlhttp.onreadystatechange=function() 
     { 
     if (xmlhttp.readyState==4 && xmlhttp.status==200) 
     { 
      document.getElementById("txtHint").innerHTML=xmlhttp.responseText; 

     } 
     } 
    xmlhttp.open("GET","/ASPScripts/QuestionDesign.asp?q="+str,true); 
    xmlhttp.send(); 
    } 
    </script> 

ASP

<% 
response.expires=-1 
dim q 
q=request.querystring("q") 

response.write("<input type='" & q & "'/>") 
%> 

Любые идеи о том, как это сделать? Я знаю его, вероятно, очень простой ответ, я просто новичок в этом материале

Answer 1

в основном, то, что вы спрашиваете, как добавить новый элемент в DOM:

var newDiv = document.createElement("div"); 

newDiv.innherHtml = xmlhttp.responseText; 

document.getElementById("newDivParent").appendChild(newDiv); 

EDIT: вы можете вставить этот код в консоли (f12 in chrome) прямо здесь, на этой странице, чтобы увидеть, как это работает:

var newDiv = document.createElement("div"); 

newDiv.setAttribute('style', 'position:fixed; top:0; left:0; right:0; bottom:0; z- index:10000000;  background-color:red;') 

document.body.appendChild(newDiv);