Ну я бы вам советовал использовать сборку и компонентный подход.
Красиво по папочкам разложить куски, а потом импортировать их где надо. Но это потребует более глубокого изучения.
Попробуйте заюзать
Vue, он довольно лёгок для понимания и применения.
Если нет - попробуйте шаблонизаторы по-проще, тот же
handlebars например.
Ну а пока вот вам функция которая после загрузки ищет все элементы с одинаковым атрибутом data-id на странице и заполняет пустые из полных:
https://jsfiddle.net/Lwoetghq/1/
addEventListener('DOMContentLoaded', function() {
var forEach = Function.prototype.call.bind(Array.prototype.forEach);
var attribute = 'data-id';
var map = {};
forEach(document.querySelectorAll('[' + attribute + ']'), function(element) {
var id = element.getAttribute(attribute);
if(!map[id]) map[id] = [];
if(element.hasChildNodes()) {
var fragment = document.createDocumentFragment();
forEach(element.childNodes, function(node) {
fragment.appendChild(node.cloneNode(true));
});
if(map[id].parent) {
console.warn('[Два не-пустых элемента с одинаковым %s: %o и %o]', attribute, map[id].parent, element)
}
map[id].parent = element;
map[id].fragment = fragment;
} else {
map[id].push(element);
}
});
for(var id in map) {
var fragment = map[id].fragment;
if(fragment) {
map[id].forEach(function(element) {
element.appendChild(fragment.cloneNode(true));
})
}
}
})
P.S. По написанию доков мне больше всего понравилась сборка из отдельных файлов маркдауна с кастомными расширениями в живой сайт(
пример), но это ещё более хитрая вещь.)