Solution 1 :

You may try this.

let headLinks = `
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="one.css" />
    <link rel="stylesheet" href="two.css" />

  document.querySelector('#html-head').insertAdjacentHTML('beforeend', headLinks);
<head id="html-head">
    ...meta contents...

Solution 2 :

try this.

    var value=$(data).find("#elementID").attr("attributeName");

Problem :

What should I do to make the same link tags reachable on each page without being written in their head tags over and over again?

Here is the jQuery snippet that I use to reach ‘header’ tag everywhere but It doesn’t work for the ‘head’ tag the same way.

    $.get('header.html', function (response) {
<header id="header"></header>


Comment posted by CertainPerformance

Configure your backend to serve it in a DRY fashion instead, ideally. A template engine might help.

Comment posted by Kinglish

just for sanity check, place the element above the script that tries to populate it