Javascript JQuery:limitappendchild

我试图在调用某个映像时限制appendChild，下面是流程的流程

用户输入（标签）：

显示（Button）：单击

输出：限制为一个的图像

在我的Javascript代码中，它的工作没有任何问题，图像是输出的，它仅限于一个：

JAVASCRIPT代码：

var display = false;

function addimage() {
    selected = document.getElementById("country").value;

    if (selected === "") {
        return false;;
    } else {
        var src = "img2/" + selected + ".jpg";
        var img = document.createElement("img");

        img.src = src;
        if (!display) {
            container.appendChild(img);
            img.style.display = "inline";
            display = true;
            console.log(display);
            console.log(country);
            console.log(selected);
        }
    }
}

function mapAddress(result) {
    marker.setPosition(result.geometry.location);
    marker.setMap(map);
    map.fitBounds(result.geometry.viewport);
}

$(document).ready(function () {
    $('#Validate').click(function () {
        $('#address').val($('#address').val().replace(/\s+/g, ' ').trim());

        var address = encodeURI($('#address').val());
        var url = 'https://maps.googleapis.com/maps/api/geocode/json?address=' + address + '&sensor=true';

        $.getJSON(url, function (data) {
            function getCountry(addrComponents) {
                for (var i = 0; i < addrComponents.length; i++) {
                    if (addrComponents[i].types[0] === "street_number") {
                        document.getElementById('street_number').value = addrComponents[i].long_name;
                    }

                    if (addrComponents[i].types[0] === "country") {
                        document.getElementById('country').value = addrComponents[i].long_name;
                    }
                }
                //return false;
            }
            console.log(getCountry(data.results[0].address_components));
        });

        var x = document.getElementById("address").value;
        if (x === "" || x === "Input Address Here") {
            alert("No Input");
        }

        var res = '';
        var address = document.getElementById('address').value;

        geocoder.geocode({
            'address': address
        }, function (results, process) {
            switch (process) {
                case google.maps.GeocoderStatus.OK:
                    $('#valid').val('Address is Valid');
                    $('#res').val(results[0].formatted_address);
                    res = results[0].formatted_address;
                    mapAddress(results[0]);

                    var display = false;
                    selected = document.getElementById("country").value;

                    if (selected === "") {
                        return false;;
                    } else {
                        var src = "img2/" + selected + ".jpg";
                        var img = document.createElement("img");
                        img.src = src;

                        if (!display) {
                            container.appendChild(img);
                            img.style.display = "inline";
                            display = true;
                            console.log(display);
                            console.log(country);
                            console.log(selected);
                        }
                    }

                    var y = document.getElementById("street_number").value;
                    if (y === "") {
                        document.getElementById("valid2").value = "Could not find street number";
                    }

                    var address = $('#address').val();
                    $.ajax({
                        type: 'POST',
                        url: 'Corrections.php',
                        data: {
                            var1: address,
                            var2: res
                        },

                        success: function (data) {
                            console.log('success final');
                            document.getElementById('cor').value = data;
                        }
                    });
                    break;
                case google.maps.GeocoderStatus.ZERO_RESULTS:
                    var x = document.getElementById("address").value;
                    if (x === "" || x === "Input Address Here") {
                        return false;
                    }
                    document.getElementById('valid').value = 'Invalid Address';
                    break;
                default:
                    alert("Error");
            }
        });
    });
});

function clear() {
    document.getElementById('valid').value = '';
    map.setCenter(defaultLatLng);
    map.setZoom(0);
    marker.setMap(null);
}

function clearbtn() {
    document.getElementById("address").value = "Input Address Here";
    document.getElementById("res").value = "Results will be displayed here";
    document.getElementById("valid").value = "";
    document.getElementById("valid2").value = "";
    document.getElementById("cor").value = "Changes will be displayed here";
    document.getElementById("street_number").value = "";
    document.getElementById("route").value = "";
    document.getElementById("locality").value = "";
    document.getElementById("administrative_area_level_1").value = "";
    document.getElementById("country").value = "";
    document.getElementById("postal_code").value = "";

    selected = document.getElementById("country").value;
    display = false;
    document.getElementById("country").value = "";
    selected = null;
    var MyContainer = document.getElementById("container");
    MyContainer.removeChild(MyContainer.childNodes[0]);

    map.setCenter(defaultLatLng);
    map.setZoom(0);
    marker.setMap(null);
}

但是当我把它放在Jquery上时，它仍然输出图像，但没有限制，这意味着每次用户单击显示按钮时，都会输出一个新图像

JQUERY代码：

var display = false;

function addimage() {
    selected = document.getElementById("country").value;

    if (selected === "") {
        return false;;
    } else {
        var src = "img2/" + selected + ".jpg";
        var img = document.createElement("img");

        img.src = src;
        if (!display) {
            container.appendChild(img);
            img.style.display = "inline";
            display = true;
            console.log(display);
            console.log(country);
            console.log(selected);
        }
    }
}

function mapAddress(result) {
    marker.setPosition(result.geometry.location);
    marker.setMap(map);
    map.fitBounds(result.geometry.viewport);
}

$(document).ready(function () {
    $('#Validate').click(function () {
        $('#address').val($('#address').val().replace(/\s+/g, ' ').trim());

        var address = encodeURI($('#address').val());
        var url = 'https://maps.googleapis.com/maps/api/geocode/json?address=' + address + '&sensor=true';

        $.getJSON(url, function (data) {
            function getCountry(addrComponents) {
                for (var i = 0; i < addrComponents.length; i++) {
                    if (addrComponents[i].types[0] === "street_number") {
                        document.getElementById('street_number').value = addrComponents[i].long_name;
                    }

                    if (addrComponents[i].types[0] === "country") {
                        document.getElementById('country').value = addrComponents[i].long_name;
                    }
                }
                //return false;
            }
            console.log(getCountry(data.results[0].address_components));
        });

        var x = document.getElementById("address").value;
        if (x === "" || x === "Input Address Here") {
            alert("No Input");
        }

        var res = '';
        var address = document.getElementById('address').value;

        geocoder.geocode({
            'address': address
        }, function (results, process) {
            switch (process) {
                case google.maps.GeocoderStatus.OK:
                    $('#valid').val('Address is Valid');
                    $('#res').val(results[0].formatted_address);
                    res = results[0].formatted_address;
                    mapAddress(results[0]);

                    var display = false;
                    selected = document.getElementById("country").value;

                    if (selected === "") {
                        return false;;
                    } else {
                        var src = "img2/" + selected + ".jpg";
                        var img = document.createElement("img");
                        img.src = src;

                        if (!display) {
                            container.appendChild(img);
                            img.style.display = "inline";
                            display = true;
                            console.log(display);
                            console.log(country);
                            console.log(selected);
                        }
                    }

                    var y = document.getElementById("street_number").value;
                    if (y === "") {
                        document.getElementById("valid2").value = "Could not find street number";
                    }

                    var address = $('#address').val();
                    $.ajax({
                        type: 'POST',
                        url: 'Corrections.php',
                        data: {
                            var1: address,
                            var2: res
                        },

                        success: function (data) {
                            console.log('success final');
                            document.getElementById('cor').value = data;
                        }
                    });
                    break;
                case google.maps.GeocoderStatus.ZERO_RESULTS:
                    var x = document.getElementById("address").value;
                    if (x === "" || x === "Input Address Here") {
                        return false;
                    }
                    document.getElementById('valid').value = 'Invalid Address';
                    break;
                default:
                    alert("Error");
            }
        });
    });
});

function clear() {
    document.getElementById('valid').value = '';
    map.setCenter(defaultLatLng);
    map.setZoom(0);
    marker.setMap(null);
}

function clearbtn() {
    document.getElementById("address").value = "Input Address Here";
    document.getElementById("res").value = "Results will be displayed here";
    document.getElementById("valid").value = "";
    document.getElementById("valid2").value = "";
    document.getElementById("cor").value = "Changes will be displayed here";
    document.getElementById("street_number").value = "";
    document.getElementById("route").value = "";
    document.getElementById("locality").value = "";
    document.getElementById("administrative_area_level_1").value = "";
    document.getElementById("country").value = "";
    document.getElementById("postal_code").value = "";

    selected = document.getElementById("country").value;
    display = false;
    document.getElementById("country").value = "";
    selected = null;
    var MyContainer = document.getElementById("container");
    MyContainer.removeChild(MyContainer.childNodes[0]);

    map.setCenter(defaultLatLng);
    map.setZoom(0);
    marker.setMap(null);
}

函数映射地址（结果）{
标记。设置位置（结果。几何。位置）；
marker.setMap（map）；
map.fitBounds（result.geometry.viewport）；
}
$（文档）.ready（函数（）{
$（“#验证”）。单击（函数（）{
$（'地址'）.val（$（'地址'）.val（）.replace（/\s+/g'，）.trim（））；
var address=encodeURI（$（'#address'）.val（））；
var url='1〕https://maps.googleapis.com/maps/api/geocode/json?address=“+地址+”&传感器=true'；
$.getJSON（url、函数（数据）{
函数getCountry（添加组件）{
对于（var i=0；i

---

似乎找不到问题，非常感谢您的帮助。

现在，似乎显示将始终为假，因此图像将始终附加到容器中

我的建议是在

img.src=src下给img一个id

，添加另一行

img.id='someImage'

现在