valdrinkoshi/blue.css

## blue.css
div { background-color: blue; color: white; }

## index.html
<!DOCTYPE html>
<html>
<head>
  <style id="myStyle"> div { background-color: red; } </style>
</head>
<body>

  <div>I should have red background color, and after 1 second a white text color.</div>

  <script>
    setTimeout(function() {
      // Link hosted in another node breaks the cascading order.
      var div = document.createElement('div');
      div.innerHTML = '<link rel="stylesheet" href="blue.css">';
      var el = div.firstElementChild;
      // Even if we clone it, it breaks the cascading order.
      div.removeChild(el);
      el = el.cloneNode(true);
      // A new link w/o any parent works fine.
      // Doesn't work for styles contained in <body>.
      // el = document.createElement('link');
      // el.setAttribute('rel', 'stylesheet');
      // el.setAttribute('href', 'blue.css');
      myStyle.parentNode.insertBefore(el, myStyle);
    }, 1000);
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<style id="myStyle"> div { background-color: red; } </style>
	</head>
	<body>

	<div>I should have red background color, and after 1 second a white text color.</div>

	<script>
	setTimeout(function() {
	// Link hosted in another node breaks the cascading order.
	var div = document.createElement('div');
	div.innerHTML = '<link rel="stylesheet" href="blue.css">';
	var el = div.firstElementChild;
	// Even if we clone it, it breaks the cascading order.
	div.removeChild(el);
	el = el.cloneNode(true);
	// A new link w/o any parent works fine.
	// Doesn't work for styles contained in <body>.
	// el = document.createElement('link');
	// el.setAttribute('rel', 'stylesheet');
	// el.setAttribute('href', 'blue.css');
	myStyle.parentNode.insertBefore(el, myStyle);
	}, 1000);
	</script>
	</body>
	</html>