Javascript 如何使用jQuery附加HTML元素而不重复？（来自AJAX响应）

因此，我有一个基于映射边界的Ajax请求，它获取DIV中引导卡的HTML响应。每次拖动映射时，Ajax都会获取其位置，并将结果附加到位于左侧（col-6）和右侧（col-6）的DIV。如何设置一个条件，当地图拖动到已经插入位置时，元素不会被复制？多谢各位

响应： div class=“带叠加v3的卡片财产卡”data lng=“15.336051956523716”data lat=“44.63806097802354”appid=“4”>

div class=“带叠加v3的卡财产卡”数据lng=“15.236051956523716”数据lat=“44.03806097802354”appid=“5”>

功能： google.maps.event.addListener（映射'idle'，函数（）{

var-bounds=map.getBounds（）；
var getNElng=bounds.getNorthEast（）.lng（）；//最大
var getSWlng=bounds.getsoutwest（）.lng（）；//分钟
var getNElat=bounds.getNorthEast（）.lat（）；//max
var getSWlat=bounds.getsoutwest（）.lat（）；//min
$.ajax({
//根据地图边界从html获取数据
url:'/property/ajax/html？range_lng='+getSWlng+'|'+getNElng+'&range_lat='+getSWlat+'|'+getNElat，
成功：函数（r、状态、jqXHR）{
如果（状态='success'）{
var响应=$（r）；
var位置=[]；
var标记=[]；
//我的问题部分
//将响应html保存到变量
让结果=响应。查找（“[data lat]”）。每个（（i，e）=>{
var lat=$（e）.数据（“lat”）；
var lng=$（e）.数据（“lng”）；
});
//将结果附加到id为load wrapper的DIV
对于（变量i=0；i{
返回{
lat:$（e）.数据（“lat”），
液化天然气：$（e）.数据（“液化天然气”）
}
}).toArray（）；
对于（var i=0；i

响应中的项是否具有任何类型的唯一标识符？显示一个响应的小样本。因此，在开始向新集合追加

$（“#加载包装器”）。empty（）之前，清空之前的集合是否更简单

？那么那些

appid

是唯一的吗？带您说明的问题实际上不是，父div有UniqueID=class=property-[i]，但我可以将唯一ID添加到此div没有问题

    var bounds = map.getBounds();
    var getNElng = bounds.getNorthEast().lng(); //max
    var getSWlng = bounds.getSouthWest().lng(); //min

    var getNElat = bounds.getNorthEast().lat(); //max
    var getSWlat = bounds.getSouthWest().lat(); //min
    $.ajax({

        //get the data from the html based on map bounds
        url: '/property/ajax/html?range_lng=' + getSWlng + '|' + getNElng + '&range_lat=' + getSWlat + '|' + getNElat,

        success: function (r, status, jqXHR) {
          
            if (status == 'success') {     
                var response = $(r);

                var locations = [];
                var markers = [];


                  // MY QUESTION PART
                 //save response html to an variable
                let result = response.find("[data-lat]").each((i, e) => {
                    var lat = $(e).data("lat");
                    var lng = $(e).data("lng");
                });
                
                //append the results to the DIV with id load-wrapper
                for (var i = 0; i < result.length; i++) {
                $('#load-wrapper').append(result[i]);
                }



                let result2 = response.find("[data-lat]").map((i, e) => {
                    return {
                        lat: $(e).data("lat"),
                        lng: $(e).data("lng")
                    }
                }).toArray();

                for (var i = 0; i < result2.length; i++) {
                    var lo = result2[i].lng;
                    var la = result2[i].lat;
                    locations.push([la, lo])
                }

                // console.log(result);
                // console.log(locations);

                //fill marker with data from locations and fill all markers to markers array
                for (var i = 0; i < locations.length; i++) {
                    var marker = new google.maps.Marker({
                        position: new google.maps.LatLng(locations[i][0], locations[i][1]),
                        // icon: icons[locations[i][2]].icon,
                        map: map,
                        // title: "property-"+(locations[i][3]),
                    });
                    markers.push(marker);
                }

            } else {
                console.log(status);
            }
        }

    });