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

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.

Suggestion: don't use `document.write` and consider using a [JS library](http://en.wikipedia.org/wiki/List_of_Ajax_frameworks#JavaScript) — lanzz, Oct 01 '12 at 07:53
what should i use then to display the button properly after few seconds without removing previous content on the page? — Harish Kumar, Oct 01 '12 at 07:55
[Alternatives to document.write](http://stackoverflow.com/questions/10762202/alternatives-to-document-write); [What are alternatives to document.write](http://stackoverflow.com/questions/4537963/javascript-what-are-alternatives-to-document-write) — lanzz, Oct 01 '12 at 07:59
@raina77ow - this code actually displaying the page numbers by fetching xml data from a file inside a div. i have put there setTimeout() function to load after few seconds and display inside a div but its display in a blank page rather than inside a div — Harish Kumar, Oct 01 '12 at 07:59

score 3 · Answer 1 · answered Oct 01 '12 at 07:58

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>");

score 2 · Accepted Answer · edited Jul 24 '15 at 08:28

2

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

edited Jul 24 '15 at 08:28

moffeltje

4,521
4
33
57

answered Oct 01 '12 at 07:57

suresh gopal

3,138
6
27
58

i have tried that also but inside innerHTML we cant use loop, it display only single button – Harish Kumar Oct 01 '12 at 08:00
it works. its display the buttons, but here i think a news problem is coming- i have create a jquery click function on that div with its class name "pagination_btn" now that function is not working – Harish Kumar Oct 01 '12 at 08:11

score 0 · Answer 3 · answered Oct 01 '12 at 08:07

0

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>";
}

answered Oct 01 '12 at 08:07

soonji

79
4

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

3 Answers3

Linked

Related