Javascript document.write（）在页面加载后调用时删除所有页面内容

我有一个网页，在那里我正在使用JSON从他的提要中阅读Google Blogger博客类别。我有两个功能。首先是获取所有博客类别列表，第二个是从中获取博客类别，然后再次点击博客以获取最新的帖子，这是文本测试，以查看网页数据是否在这里

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

var blogurl=”https://googleblog.blogspot.com/";
函数blogCatList（json）{
文件。写（“”）；
编写（'选择一个类别'）；
for（var i=0；i
”；
towrite=towrite+commenttext；
}
如果（displaymore==true）{
towrite=towrite+'
'；
}
文件。编写（towrite）；
文档。编写（“”）；
}                    
}
函数showThisCatPosts（BLOGCAT）{
文件。写（“”）；
document.write（’我的问题是，当页面加载时，它会完美地显示所有页面数据和博客类别列表，但当我选择任何类别时，我的所有页面数据都会删除，只有标签帖子可见。为什么会发生这种情况…？？我只想根据标签更改帖子，而不是删除所有页面数据…
这是正常的行为
document.write（）的ur。您可能需要使用：

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

最后我解决了这个问题。原因是
document.write（）
在页面加载时写入文本是不好的。如果您想稍后在页面加载时写入一些文本，可以使用它

如果您想稍后编写，则必须使用
document.getElementById（“element_id”）.innerHTML
来编写文本，但如果您想编写
标记，则必须使用
document.getElementById（“element_id”）.innerHTML
不如它编写的那样好，但不要点击SRC，因此请使用
document.createElement（“脚本”）
在页面加载后编写脚本，该脚本也可以运行

请参阅我的代码的工作演示，网址为…）

特别感谢：：-）
这就是document.write的工作原理，除了document write之外，还可以使用DOM createElement和appendChild或使用jQuery。这是正常的行为。您必须先使用
document.open（）
然后再使用
document.close（）
。顺便说一下，使用
document.write（）
始终不是一个好主意。有更好的方法。我尝试使用
document.getElementById（“element\id”）.innerHTML
但它不起作用。请查看位于Thank的实时演示。现在问题解决了…：）我尝试使用
document.getElementById（“element\id”）.innerHTML
但它不起作用。请在@MuhammadHassan上查看实时演示对不起，请替换
“元素\u id”
用正确的一个。@MuhammadHassan真的很抱歉我在手机上。很快会回复你。@MuhammadHassan好的，你所做的也是错误的。请创建一个包含所有文本的变量，比如说，
finalHtml
，然后使用
+=
，然后稍后给出
.innerHTML=finalHtml
。你明白吗？
：）
好的。这是你想要的演示，但不起作用…：（如果是这样，你只需要接受我的答案就行了？你可以把你的答案发布给未来的访问者。那太好了，但是我的努力伙伴呢？我同意我没有给出
文档背后的理由。write（）
缺陷，但请仔细想想，您会再次接受我的回答吗？对此表示抱歉。投票未通过处理。：P