xhr向php获取请求后如何避免重写覆盖当前页面

Question

如题，用js向php发送一个请求并加载响应到当前页面的时候，如何避免重写是覆盖当前页面；
具体情况是这样的：
js：

var navLst = {};

var reqInfo   = {};
reqInfo['reqNav']  = true;
reqInfo['reqSin']   = 'qtrfss';   
//more limt options would be added

var  reqSent= JSON.stringify(reqInfo);

var xhr = null;
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
}else{
    xhr = ActiveXObject('Microsoft.XMLHttp');
}

xhr.open('POST', '/themes/ticket/model/echoNav.php',true);
xhr.onreadystatechange=function(){
    if(xhr.readyState == 4) {
        if(xhr.status == 200) {
            try{
                var resp = eval('('+ xhr.responseText +')');
                listMenu(resp);
            }catch(e){
                listMenu(e);
            }
        } else {
            //undo 
        }
    }

};
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('reqSent='+reqSent);

/themes/ticket/model/echoNav.php返回的是一个数组字符串化的json；

然后获取到了menlist，重写的时候整个页面只剩下menulist了。。。
listmenu:

function listMenu(menuLst){

//var menuLst = ['Sci-Fi','home','wiki'];//menu lst should come from php

var nav = ''; 
var navIE = ''+
    '<!--[if lt IE 7]>'+
        '<div class="onav_wrapper lt-ie9 lt-ie8 lt-ie7">'+
    '<![endif]-->'+
    '<!--[if IE 7]>'+
        '<div class="onav_wrapper lt-ie9 lt-ie8">'+
    '<![endif]-->'+
    '<!--[if IE 8]>'+
        '<div class="onav_wrapper lt-ie9">'+
    '<![endif]-->'+
    '<!--[if gt IE 8]><!--> '+
        '<div id="onav_wrapper" class="onav_reset"> '+
    '<!--<![endif]-->';
var navStyle = '<link rel="stylesheet" href="/themes/ticket/nav/nav.css">';//stylesheet's url

nav +=navIE;
nav +=navStyle;
nav +='</div>';

document.write(nav);

var navUl = document.createElement('ul');
    navUl.id = 'onav_bar';
var navLst = '<ul id="onav_bar">'
for (var i=0 ;i <= menuLst.length - 1; i++) {
    var navLi = document.createElement('li');
    var achor = document.createElement('a');
    if(i == 0){
        navLi.className = 'onav_top onav_logo';
            achor.setAttribute('href','#');
        var spanX = document.createElement('span');
            spanX.className = 'onav_yellow';
            spanX.innerHTML = 'Sci-Fi';
        achor.appendChild(spanX);
        var spanY = document.createElement('span');
            spanY.className = 'onav_white';
            spanY.innerHTML = '.Net';
        achor.appendChild(spanY);
    }else{
        navLi.className = 'onav_top';
        achor.setAttribute('href','#');
        achor.setAttribute('target','_blank');
        achor.setAttribute('title',menuLst[i]);
        achor.innerHTML = menuLst[i];
    }
    navLi.appendChild(achor);   
    navUl.appendChild(navLi);
};
var navDiv = document.getElementById('onav_wrapper');
    navDiv.appendChild(navUl);
//need to be brief
var oAhor = document.getElementById('onav_bar').getElementsByTagName('a');

for (i=0; i<oAhor.length; i++) {
    var testAttr = oAhor[i].parentNode.getAttribute('class');
    if (oAhor[i].href == window.location) {
        if (testAttr  === null) {
            oAhor[i].parentNode.setAttribute('class', 'onav_active');
        } else{
            oAhor[i].parentNode.setAttribute('class', testAttr + ' onav_active');
        }
    }
}

}

烦请大神帮忙解答一下；

新手！！

多谢啦！

Answer 1

是 document.write(nav); , DOM加载完成后再用document.write()方法会覆盖以前内容。测试一下，把其中函数中的方法换成document.write('')试试看

Answer 2

换jquery append()方法试一下