How do I output the contents of the balun (Yandex.maps api) in a separate div?

Make a map using API Yandex.cards, as the contents of the balun (balloonContent) to bring into a specified div on the page?

UPD. Got to do, but if a few labels, switching from label to label, not changing the content, it is necessary to close the balun. How to fix this?
ymaps.ready(function () {
 var myMap = new ymaps.Map('mapYa', {
 center: [55.727072007822755,37.663291730468764],
 zoom: 12
 }, {
 searchControlProvider: 'yandex#search'
}),
 myPlacemark = new ymaps.Placemark([55.727072007822755,37.663291730468764], {
 hintContent: 'Balun 1',
 balloonContent: '<div class="balloon"><b>Opera</b><br>Belinskogo str., 108</div>'
 }, {
 iconLayout: 'default#image',
 iconImageHref: 'theater.png',
 iconImageSize: [100, 100],
 iconImageOffset: [-50, -100]
});

 myPlacemark2 = new ymaps.Placemark([55.746054920068914,37.67359141308594], {
 hintContent: 'Balloon 2',
 balloonContent: '<div class="balloon"><b>33333Оперный theatre</b><br>Belinskogo street, 59</div>'
 }, {
 iconLayout: 'default#image',
 iconImageHref: 'theater.png',
 iconImageSize: [100, 100],
 iconImageOffset: [-50, -100]
});

 myMap.events.add(['balloonopen', 'balloonclose'], function (e) {
 var cont = $(".balloon").html();
$("#test").html(cont);
 myMap.events.add('click', function () {
myMap.balloon.close();
});
});

myMap.geoObjects.add(myPlacemark);
myMap.geoObjects.add(myPlacemark2);
myMap.behaviors.disable('scrollZoom');
 });
July 9th 19 at 09:46

Find more questions by tags APIYandex