IE11 / Edge does not follow / css link order in DOM

Question

tl; dr: IE11 / Edge seems to favor styles in CSS files loaded last with javascript, rather than how they appear in the DOM structure.

I cannot find anyone else who has reported this problem, but I am looking for help confirming my problem.

I have a function for loading JS libraries (locally if cdn does not work), and this includes a line for the "appendTo" or "prependTo" of the "head" element (passes in the "method").

$("<link>", { rel: "stylesheet", type: "text/css", "href": css })[method]("head");

The problem is that the basic style of a website can override library styles, so I thought that "prependTo" "head" would work to ensure that basic styles override a library - this works in Firefox and Chrome. But in IE, library styles are still overriding, as if the CSS file was after the main files in the DOM, even when checking for the DOM, it shows that it was before.

In my case, I load dataTables CSS and JS from local versions if the CDN fails - and since I want my custom CSS site to override the library, I use "prependTo" to make sure the CSS data tables are in front of my custom web CSS site in the document title tag. IE11 still applies its "last" or gives preference. This is true when emulating IE10, etc., although I no longer have a test area for the "real" old versions of IE to check if this is always true.

Can you confirm that this is functionality in IE? Do you know when it started? Do you know what to fix? Trying to avoid the "! Important" heap in my CSS files.

Answer 1

Edge 16. , css JavaScript, html/page.

    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = '/link/to/style.css';
    document.querySelector('body').appendChild(link);