How to get a handle on default MousePosition elements in OpenLayers?

Question

I have an OpenLayers interface with two maps side-by-side. They are synced so that any pan or zoom action on either map affects both of them.

I also have MousePosition controls on each map so that the user can see the lon/lat coords on mouseover. I like having a separate MousePosition on each map rather than a single one in an external div. I was able to sync the MousePosition controls to one another using the code below.

My question is this: Is there a better way to get a handle on the MousePosition elements? The getElement approach I'm using feels a bit hacky. Thanks.

map1.events.register("mousemove", map1, function (e) {
  var position = map1.getLonLatFromViewPortPx(e.xy).transform(WGS84_SM, WGS84);
  var lat = position.lat.toFixed(5);
  var lon = position.lon.toFixed(5);
OpenLayers.Util.getElement("OpenLayers.Control.MousePosition_68").innerHTML =
                           "<label>" + lon + " " + lat + "</label>";
});

map2.events.register("mousemove", map2, function (e) {
  var position = map2.getLonLatFromViewPortPx(e.xy).transform(WGS84_SM, WGS84);
  var lat = position.lat.toFixed(5);
  var lon = position.lon.toFixed(5);
OpenLayers.Util.getElement("OpenLayers.Control.MousePosition_37").innerHTML =
                           "<label>" + lon + " " + lat + "</label>";
});

Answer 1

Why not just listen to the mouse-move event and write to your own div and just place it on top of your map with relative positioning and a high z-index? Then you'll know exactly the ID of each div and can write to it what you like.