banditman,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.op-f-ring {
color: hsla(240, 100%, 50%, 1);
background-color: hsla(90, 100%, 50%, 1);
}
</style>
</head>
<body>
<div id="p">:-))))<div>
<a href="">Фантазии</a> :-D
</div>
<ul>
<li>Фантазии</li>
</ul>
<div>
<a href="">Классика</a>
</div>
<ul>
<li>Классика</li>
</ul></div>
<script>
window.addEventListener('DOMContentLoaded', function() {
[].forEach.call(document.querySelectorAll('a'), function(item) {
item.addEventListener('click', function(event) {
event.preventDefault();
alert(item.textContent);
});
}); //для проверки сохранения клика по ссылке
var data = {"Фантазии" : "8", "Классика":"3"};
var treeWalker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);
while (treeWalker.nextNode()) {
var el = treeWalker.currentNode;
if(el.parentNode.tagName !== "A") continue;
Object.keys(data).forEach(function(key) {
while (~el.data.indexOf(key)) {
var next = el.splitText(el.data.indexOf(key));
el.parentNode.insertAdjacentHTML("afterBegin", '<img style="height:97px" src="images/opravy/icon_ring_from_above_'+data[key]+'.png" width="97" height="97"><p class="op-f-ring">'+key+'</p>');
el = next.splitText(key.length);
next.parentNode.removeChild(next)
}
})
};
});
</script>
</body>
</html>