Vorherige Daten sind verloren wegen neuer Daten

Question

Ich erstelle ein HTML-Tag und die Zuordnung von Daten wie folgt.

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; 
    }); 
} 

Jetzt, wenn ich meine zweite div übergeben, gehen vorherige Daten verloren. Und zum ersten div bekomme ich zweite Daten.

Diese, wie ich die Klasse nenne:

für die erste Instanz

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

Für die zweite Instanz

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

Jede Idee, wie diese zu überwinden?

Answer 1

In getData rufen Sie

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

, die auf das Element myUL jedes Mal es aufgerufen wird genannt schreibt.

Answer 2

Anfügen statt

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

ersetzen oder können Sie den alten

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