I am trying to display/replace the HTML content inside a div according to a pressed pushpin in Bing Maps. I know I should be looking at JQuery .html() but I can't see how I can put a variable inside the HTML tags.
Example code:
function pushpinClickedCallback(e) {
if (e.target.metadata) {
var data = e.target.metadata.title; <-- how to make this include the JS variable and HTML tags
$('#infoPane').html(data);
}
// var e above is a pushpin in Bing Maps, infoPane is the div
Every time the callback is fired there is different data to be displayed. Should I even be looking at doing it this way? Or should I create a new div and destroy it each time (inefficient if pressing the same pushpin many times quickly)?
Your variable data will contain a string. Manipulate the string using JavaScript string functions to replace your title string and add whatever HTML tags you need. For example:
var data = e.target.metadata.title; // "Pushpin title"
var htmlString = "<div class=\"pin-text\">" + data + "</div>";
$("#infoPane").html(htmlString); // Replace infoPane element contents