document.write() Is Removing All Page Content When Calling After Page Load

Question

I have a web page where I am reading Google Blogger blog category from his feed using JSON. I have two functions. First on is getting all the Blog Categories List and second one is taking Blog Categories from that and then hitting again Blog to get latest posts from that This is the text test to see that web page data is here or not.

<div id="blogCategoriesList">
<script type="text/javascript">
var blogurl = "https://googleblog.blogspot.com/";
function blogCatList(json) {
    document.write('<select onchange="showThisCatPosts(this.value)">');
    document.write('<option>CHOOSE A CATEGORY</option>');
    for (var i = 0; i < json.feed.category.length; i++)
    {
        var item = "<option value='" + json.feed.category[i].term + "'>" + json.feed.category[i].term + "</option>";
        document.write(item);
    }
    document.write('</select>');
}                   
document.write('<script type=\"text/javascript\" src=\"' + blogurl + '/feeds/posts/default?redirect=false&orderby=published&alt=json-in-script&callback=blogCatList&max-results=500\"><\/script>');
document.write('<br/><br/><a href=\"' + blogurl + '\" target=\"_blank\" class=\"footerLINK\">Read The Blog Online Now<\/a>');
</script>
</div>
<div id="blogCategoriesPost">
<script style='text/javascript'>  
var blogurl = "https://googleblog.blogspot.com/";
var numposts = 10;  // Out Of 500
var displaymore = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;
function blogCategoriesPost(json) {                  
    if(json.feed.entry.length < numposts ){
        numposts = json.feed.entry.length;
    }
    for (var i = 0; i < numposts; i++) {
        var entry = json.feed.entry[i];
        var posttitle = entry.title.$t;
        var posturl;
        if (i == json.feed.entry.length) break;
        for (var k = 0; k < entry.link.length; k++) {
            if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
                var commenttext = entry.link[k].title;
                var commenturl = entry.link[k].href;
            }
            if (entry.link[k].rel == 'alternate') {
                posturl = entry.link[k].href;
                break;
            }
        }                        
        var postdate = entry.published.$t;
        var cdyear = postdate.substring(0, 4);
        var cdmonth = postdate.substring(5, 7);
        var cdday = postdate.substring(8, 10);
        var monthnames = new Array();
        monthnames[1] = "Jan";
        monthnames[2] = "Feb";
        monthnames[3] = "Mar";
        monthnames[4] = "Apr";
        monthnames[5] = "May";
        monthnames[6] = "Jun";
        monthnames[7] = "Jul";
        monthnames[8] = "Aug";
        monthnames[9] = "Sep";
        monthnames[10] = "Oct";
        monthnames[11] = "Nov";
        monthnames[12] = "Dec";
        document.write('<div id="mainDIV">');                        
        document.write('<h2 class="post_heading">' + posttitle + '</h2>');
        if ("content" in entry) {
            var postcontent = entry.content.$t;
        } else
            if ("summary" in entry) {
                var postcontent = entry.summary.$t;
            } else var postcontent = "";
        var re = /<\S[^>]*>/g;
        postcontent = postcontent.replace(re, "");   // Will Show Only Text Instead Of HTML
        if (showpostsummary == true) {
            if (postcontent.length < numchars) {
                document.write('<span class="post_summary">');
                document.write(postcontent);
                document.write('</span>');
            } else {
                //document.getElementById("catPosts").innerHTML += '<span class="post_summary">';
                document.write('<span class="post_summary">');
                postcontent = postcontent.substring(0, numchars);
                var quoteEnd = postcontent.lastIndexOf(" ");
                postcontent = postcontent.substring(0, quoteEnd);
                document.write(postcontent + '...');
                document.write('</span>');
            }
        }
        var towrite = '';
        document.write('<strong class="post_footer">');
        if (showpostdate == true) {
            towrite = 'Published On: ' + towrite + monthnames[parseInt(cdmonth, 10)] + '-' + cdday + '-' + cdyear;
        }
        if (showcommentnum == true) {
            if (commenttext == '1 Comments') commenttext = '1 Comment';
            if (commenttext == '0 Comments') commenttext = 'No Comments';
            commenttext = '<br/><a href="' + commenturl + '" target ="_blank">' + commenttext + '</a>';
            towrite = towrite + commenttext;
        }
        if (displaymore == true) {
            towrite = towrite + '<br/><a href="' + posturl + '" target="_blank">Read Full Article --></a>';
        }
        document.write(towrite);
        document.write('</strong></div>');
    }                    
}
function showThisCatPosts(BLOGCAT){
    document.write('<script type=\"text/javascript\" src=\"' + blogurl + '/feeds/posts/default/-/' + BLOGCAT + '?redirect=false&orderby=published&alt=json-in-script&callback=blogCategoriesPost&max-results=500\"><\/script>');
    document.write('<a href=\"' + blogurl + '\" target=\"_blank\" class=\"footerLINK\">Read The Blog Online Now<\/a>');
}
</script>

You can see a working DEMO at JSBIN. My problem is that when page load, its works perfectly showing all page data and the blog categories lists too but when I select any category then my all page data remove and only that label posts are visible. Why this is happening...??? I want to just change the posts as per label not to remove all page data...

Answer 1

That's the normal behaviour of document.write(). You might need to use:

document.getElementById("element_id").innerHTML = 'Stuff to Write.';