Was-Ja,
попытка облегчить понимание решения, предложенного
Aetae,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script>
addEventListener('DOMContentLoaded', function() {
var forEach = Function.prototype.call.bind(Array.prototype.forEach);
var attribute = 'data-for';
forEach(document.querySelectorAll('[' + attribute + ']'), function(element) {
var cls = element.getAttribute(attribute);
var fragment = document.createDocumentFragment();
forEach(element.childNodes, function(node) {
fragment.appendChild(node.cloneNode(true));
});
forEach(document.querySelectorAll(cls), function(element) {
element.appendChild(fragment.cloneNode(true))
})
});
})
</script>
</head>
<body>
<div class="add"></div>
<div data-for='.label, .test' >это пример, будет во всех <b>div</b> с классами указанными в атрибуте <i>data-for</i>'.label, .test'</div>
<div class="label"></div>
<div class="label"></div>
<div class="label"></div>
<div class="label"></div>
<div class="red">а тут ничего не изменится</div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="add"></div>
<div data-for='.add' >это пример, будет во всех <b>div</b> с классами указанными в атрибуте <i>data-for</i>'.add'</div>
</body>
</html>