javascript document.write() removes the html from page and display result in a blank page [duplicate]

Question

Possible Duplicate:
JavaScript - what are alternatives to document.write?

i am creating a javascript function which i want to execute after few seconds but when it executes it removes all the page content and display only that result which i am displaying using document.write() here is my javascript code.

<script language="javascript">
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

setTimeout(function(){
xmlhttp.open("GET","some.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
var x=xmlDoc.getElementsByTagName("offer");
var page = parseInt(x.length) / 10;
document.write("<div class='pagination_btn_cont'>");
for (i=1;i<=page;i++)
{ 
 document.write("<div class='pagination_btn'>"+i+"</div>");
}
document.write("</div>");
},10000);

</script>

when i open the webpage its display all the content of the page but after 10 seconds the page will become blank and display only the numbers which i am getting from the loop.

any suggestion how can do this task.

Answer 1

You can use innerHTML in javascript. It use to insert data to particular div without affecting page contents.

Example:

var results = "";
for(var i=1;i<=10;i++)
{
     results += "<div class='pagination_btn'>"+i+"</div>";
}
document.getElementById("your result show div id").innerHTML = results;

you can specify $('.pagination_btn').bind("click")... inside your document.ready

Answer 2

Use innerHtml to change text of a specific element.

HTML

<div id="container"></div>

javascript

document.getElementById('container').innerHTML += '<div>content</div>';

or you can use jQuery library, life will be much easier:

$("#container").append("<div>content</div>");

Answer 3

try this

document.getElementsByTagName('body').innerHTML += '<div id="parent" class="pagination_btn_cont">';

for (i=1;i<=page;i++)
{ 
 document.getElementById('parent').innerHTML = "<div class='pagination_btn'>"+i+"</div>";
}