JS common element loader

In each html page, there are three elements within a flexbox container. The <nav> and <aside> tags represent the two columns on the sides, and the <article> is the center. Within the article is a <header> tag, which is also loaded automatically.

Each tag's contents are replaced from their correspoding html files. The javascript is loaded on each page right before the closing </body> and contains the following:
(Don't worry about the last three lines)

If you want to use multiple of each tag, set an id for the one to replace, and use $("#header-common"), for example. Each path starts with a /, since the files are in the root directory. You could move these to a subdirectory for organization.

Code tags with click-to-copy

To separate tags, I am using a custom attribute called src, which points to a file to load from. In the css, I can select between them with code and code[src]. Only tags loaded from a source get display: block so that the background is a solid rectangle. I am using the ::after pseudo element to display a message when hovering over big blocks, that has an opacity transition, as well as ::before and content: attr(src) "\a"; to display the filename. Here is the script that loads sources and allows click-to-copy: