AJAX how to create a new element? - html

Question

i've been using an online tutorial on how to use ajax to create a new element dependent on the users input. At the moment, all it will do is replace an already made div's innerhtml however I would like to create a new div and fill it with the input designated by the user. Here is my current code:
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 & "'/>")
%>
Any ideas on how to do this? I'm aware its probably a very simple answer, i'm just very new to this stuff

Answer 1

basically, what you are asking is how to append a new element to the DOM:
var newDiv = document.createElement("div");
newDiv.innherHtml = xmlhttp.responseText;
document.getElementById("newDivParent").appendChild(newDiv);
EDIT: you can paste this code in console (f12 in chrome) right here on this page to see how it works:
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);