appending a picture to div when button is clicked

Question

What I'm trying to do is have users input to be added to the string and the picture of google streetview append to the div called map

I tried two different codes but neither worked.

$("#search").click(function(){
var citySearch = $("#city").val();
var map = $("map");
var streetView = "https://maps.googleapis.com/maps/api/streetview?size=400x400&location="+ citySearch + "";
map.append('<img src="'+ streetView +'">')

})

and also used this with the button being onclick myFunction and onsumbit myFunction

function myFunction(){
var citySearch = $("#city").val();
var map = $("map");
var streetView = "https://maps.googleapis.com/maps/api/streetview?size=400x400&location="+ citySearch + "";
map.append('<img src="'+ streetView +'">')

}

HTML

<input type="text" name="" id="city">
<button id="search" onclick="myFunction()">Submit</button>

<div id="map">

</div>

Answer 1

If your intention is to render image inside div with id "map" then your jQuery selector needs to be #map, not map:

var map = $("#map");