Appended to html page script and CSS don't work

Question

I am trying to append some CSS and JS to my static HTML file. CSS and JS files are stored in the same folder. It sounds stupid, but I need to do that. So, CSS and JS have been appended but they are not applying to a HTML file because background should be red. The path that I created is correct because if I do inspect element on Chrome Devtools and click to appended link it opens what I need. So, there are no errors, scrip appends what I need, but I see no result.

My HTML file

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Home</title>
</head>
<body>

hello world

<script>
  const href = window.location.pathname;
  const chunkIndex = href.lastIndexOf('/');
  const path = href.slice(0, chunkIndex + 1);

  function appendScripts() {
    const script = document.createElement("script");
    script.src = path + "scripts.js";    // use this for linked script
    document.body.appendChild(script);
  }

  function appendCSS() {
    link=document.createElement('link');
    link.href= path + 'styles.css';
    link.rel='rel';
    document.getElementsByTagName('head')[0].appendChild(link);
  }

  document.addEventListener("DOMContentLoaded", function(event) {
    appendCSS();
    appendScripts();
  });
</script>

</body>
</html>

My CSS file:

body {
  background-color: red;
}

Have you checked the browser console for any errors or double checked the path of the new css file is correct and not returning a 404? — NewToJS
– NewToJS, Commented Nov 18, 2017 at 10:05
I've checked, no errors and the path that I created is correct because if I do inspect element on Chrome Devtools and click to appended link it opens what I need. — rel1x
– rel1x, Commented Nov 18, 2017 at 10:06
Try changing rel to stylesheet and add type with the value of text/css. Example: link.type="text/css" link.rel="stylesheet" — NewToJS
– NewToJS, Commented Nov 18, 2017 at 10:10
You are very welcome. Not sure how I missed that from the first read but I did notice it just after you said no errors in the console and the link is correct :p — NewToJS
– NewToJS, Commented Nov 18, 2017 at 10:14

Vipin Kumar · Accepted Answer · 2017-11-18 10:10:52Z

2

You need to fix the following line

link.rel='rel';

to

link.rel='stylesheet';

answered Nov 18, 2017 at 10:10

Vipin Kumar

6,5661 gold badge21 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Vipin Kumar Over a year ago

Sure, whenever your are comfortable. :)

rel1x Over a year ago

it's not about comfort. the system of SO doesn't give me to accept any answer so fast because i've just created a question.

Vipin Kumar Over a year ago

ohh. Sorry my bad. New to SO :(

Collectives™ on Stack Overflow

Appended to html page script and CSS don't work

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related