呼び出されたjsファイル　自動的にa要素を追加したい

今railsで制作中です。

haml
1%script{:src => "https://rawgit.com/manifestinteractive/jqvmap/master/dist/jquery.vmap.js", :type => "text/javascript"}
2%script{:charset => "utf-8", :src => "/assets/jquery.vmap.world.js"}
3:javascript
4  (function($){
5  $(document).ready(function(){   
6      $('#vmap').vectorMap({
7          map: 'world_en',
8          backgroundColor: null,
9          color: '#ffffff',
10          hoverOpacity: 0.7,
11          selectedColor: '#666666',
12          enableZoom: true,
13          showTooltip: true,
14          scaleColors: ['#C8EEFF', '#006491'],
15          normalizeFunction: 'polynomial',
16          values: sample_data,
17          markerStyle: {
18              initial: {
19                  fill: '#F8E23B',
20                  stroke: '#383f47'
21              }
22          },
23          markers: [
24              {latLng: [41.90, 12.45], name: 'Vatican City'},
25              {latLng: [43.73, 7.41], name: 'Monaco'}
26          ],
27      })
28    });
29  })(jQuery);

30#vmap{:style => "width: 100vw; height: 100vh;"}
31}

で読み出されていたｊｓファイルにclickしたら指定のページに飛ぶようにa要素を追加したいのですがどのようにすればいいですか？

写真の選択されている要素を囲うようなaタグ（<a href="…"></a>）の設定をしたいです。

一応

haml
1$("#jqvmap1_id").on("click", function() {
2        $("#jqvmap1_id").attr({
3          href: 'https://www…',
4          target: '_blank'
5        });
6      });

で試したのですが、
①html要素が中に入ってしまう
②aタグが生成されない
でつんでます

おねがいします