如果数据长度发生变化，请添加Div

Question

我正在尝试“更新”从数据库收集的数据列表。现在，我的代码将值列表打印到div中。我希望它只是在检查后找到一个新的Coordinate set +值，而不是再次打印相同的set。

我试图清除身体，但我希望它更新div，因为它不完全清楚它。我用过

document.body.innerHTML = '';

清除它。

你可以在这里看到它重复相同的值，我希望标记值更新现有的div条目。

Parse.initialize("API", "API");



var mValue = Parse.Object.extend("mValue");
var queryLngLat = new Parse.Query(mValue);
var classObject = new mValue();
var existingMarkers= [];
var databaseMarkers= [];
var counter = 0;
var div ;
var resultsLength;


setInterval(function update() {

queryLngLat.notEqualTo("longAndLat", null);
queryLngLat.find({
  success: function(results) {

      console.log("Successfully retrieved " + results.length + " scores.");

     for (var j = 0; j < results.length; j++ ) {
    databaseMarkers = (results[j].attributes.longAndLat);
resultsLength = results.length;

     var  markerValueRead = results[j].attributes.Val;

     CoordsPush = databaseMarkers.substring(1, databaseMarkers.length - 1);

     div =  document.createElement("div");
      div.style.width = "400px;";
    div.style.background = "white";
    div.style.color = "black";
    div.innerHTML = "Database LatLng: " + CoordsPush + " Marker Value: " + markerValueRead;                                     document.body.appendChild(div);

    //console.log("(" + markers[d].getPosition().d + ", " + markers[d].getPosition().e +")");

    console.log("Database LatLng: " + databaseMarkers + " Marker Value: " + markerValueRead);

        }

    }

    });


}, 10000);

});

Answer 1

您可以为每个创建的div添加 id ，该div是此div显示的坐标的唯一标识符。

像

这样的东西

div =  document.createElement("div");
div.id = CoordsPush         // <---- ADD THIS LINE
div.style.width = "400px;";
div.style.background = "white";
div.style.color = "black";
div.innerHTML = "Database LatLng: " + CoordsPush + " Marker Value: " + markerValueRead;                                     document.body.appendChild(div);

然后添加代码以检查在创建新ID之前是否已存在具有该id的div。并使用您从后端获得的新值更新现有div。

编辑：也许您需要转换坐标字符串值以使其成为有效的ID