新しいデータのために以前のデータが失われました

Question

私はいくつかのHTMLタグを作成し、以下のようにデータを割り当てています。

MyCombo = function(args) { 
    var dataUrl = args.url; 
    var divID = args.divID; 
    var div = document.getElementById(divID); 

    var myTable = '<input type="text" id="myInput" list="myUL" onclick = "MyList()" onkeyup="MyList()" style="width:100% " >' + 
     '<ul id="myUL" hidden=false>' + '<li>' + '<a href="#" ></a>' + '</li>' + '</ul>'; 
    div.innerHTML = myTable; 

    function getData(callback) { 
     var httpRequest = new XMLHttpRequest(); 
     httpRequest.open('GET', dataUrl, true); 
     httpRequest.onreadystatechange = function() { 
      if (httpRequest.readyState === XMLHttpRequest.DONE && httpRequest.status === 200) { 
       callback(httpRequest.responseText); 
      } 
     }; 
     httpRequest.send(); 
    } 

    getData(function(data) { 
     var jsonc = JSON.parse(data); 
     var new_opt = ""; 
     for (i = 0; i < jsonc.length; i++) { 
      new_opt += '<li><a href="#">' + jsonc[i]['VALUE'] + '</a></li>'; 
     } 
     document.getElementById('myUL').innerHTML = new_opt; 
    }); 
} 

私が2番目のdivを渡すと、以前のデータが失われています。そして最初のdivのために私は2番目のデータを取得しています。

この方法を私はクラスを呼び出しています：

最初例えば

var myCombo = new liveSearch({ 
    "url": "data1.json", 
    "divID": "ID1", 
}); 

二例えば

var myCombo2 = new liveSearch({ 
    "url": "data2.json", 
    "divID": "ID2", 
}); 

これを克服するためにどのように任意のアイデア？ getDataで

Answer 1

あなたはそれが呼ばれるたびmyULと呼ばれる要素に書き込み

 document.getElementById('myUL').innerHTML = new_opt; 

を呼び出します。

Answer 2

追加の代わり

document.getElementById('myUL').appendChild(new_opt); 

か、それは私がこれを取得しています同じ内部のスクリプトタグであるHTMLで古い

old_html = document.getElementById('myUL').innerHTML; 
document.getElementById('myUL').innerHTML = old_html+new_opt;