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...

This is how document.write work, istead of document write use DOM createElement and appendChild or use jQuery. — jcubic, Jan 15 '16 at 15:01
You have to use `document.open()`first and at the end `document.close()`. By the way, using `document.write()`is always not a good idea. There are better ways. — Reporter, Jan 15 '16 at 15:05
I tried using `document.getElementById("element_id").innerHTML` but then its not working. Check out live DEMO at http://jsbin.com/pebexebexi/edit?html,output — Muhammad Hassan, Jan 15 '16 at 15:09

score 1 · Accepted Answer · answered Jan 15 '16 at 15:03

1

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

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

answered Jan 15 '16 at 15:03

Praveen Kumar Purushothaman

164,888
24
203
252

I tried using `document.getElementById("element_id").innerHTML` but then its not working. Check out live DEMO at http://jsbin.com/pebexebexi/edit?html,output – Muhammad Hassan Jan 15 '16 at 15:09
@MuhammadHassan Sorry, kindly replace `"element_id"` with the right one. – Praveen Kumar Purushothaman Jan 15 '16 at 15:15
@MuhammadHassan Really sorry I am on a mobile. Will respond you soon. – Praveen Kumar Purushothaman Jan 15 '16 at 15:16
@MuhammadHassan OKay, what you are doing is also wrong. Kindly create a single variable containing all the text, say, `finalHtml` and use `+=` and then later give `.innerHTML = finalHtml`. Do you understand? `:)` – Praveen Kumar Purushothaman Jan 15 '16 at 15:22
Ok. Here is you desired DEMO at **http://jsbin.com/qidewefibe/1/edit?html,output** but not working... :( – Muhammad Hassan Jan 15 '16 at 15:33

score 0 · Answer 2 · edited May 23 '17 at 12:08

Finally I got it solved. The reason is that document.write() is bad as it write the text on page load. You can use it if you want to write some text on page load not later.

If you want to write later then have to use document.getElementById("element_id").innerHTML to write your text but if you want to write <script> tags then document.getElementById("element_id").innerHTML is not good as it will write but dont hit the SRC so use document.createElement("script") to write scripts after page load that will be runable too.

See the working DEMO of my code at JSBIN... :)

Special Thanks To: @Praveen Kumar :-)

Sorry for this. Vote got miss-handled. :P – Muhammad Hassan Jun 18 '16 at 13:23 — Muhammad Hassan, Jun 18 '16 at 13:23

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

2 Answers2