title: JQuery: limit appendChild
body: <p>I'm trying to limit appendChild when calling a certain image, here's how the flow goes</p>
  
  <p><strong>USER's INPUT(label):</strong> Albania</p>
  
  <p><strong>Display(buttton):</strong> click</p>
  
  <p><strong>OUTPUT:</strong> Image that is limited to one </p>
  
  <p>In my Javascript code its working without any problems the image is output and it is only limited to one: <a href="http://jsfiddle.net/Bh9h7/" rel="nofollow">http://jsfiddle.net/Bh9h7/</a></p>
  
  <p><strong>JAVASCRIPT CODE:</strong></p>
  
  <pre><code>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);
          }
      }
  }
  </code></pre>
  
  <p>But when I put it on my Jquery, it stills output the image but it has no limit meaning everytime the user clicks the display button a new image is output.</p>
  
  <p><strong>JQUERY CODE:</strong></p>
  
  <pre><code>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 + '&amp;sensor=true';
  
          $.getJSON(url, function (data) {
              function getCountry(addrComponents) {
                  for (var i = 0; i &lt; 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);
  }
  </code></pre>
  
  <p>can't seem to find the problem, any help is appreciated.</p>