CODEWITHSUNDEEP
javascript
Nick
Nick

Reputation: 14293

JavaScript - how to prepend an element in the header tag

I am trying to prepend a stylesheet file dynamically generated into my header tag.

The problem I've got is that I need this file to be added before any other CSS files.

I tried using insertBefore() but that seems to remove the element I am using as an identifier for the element to be appended instead of just appending the new one above it.

Here's the code:

 CssFile = document.getElementById('my-css')
 Link = document.createElement('link')
 Link.href = "example.css"
 Link.type = 'text/css'
 Link.rel = 'stylesheet'
 Link.insertBefore(CssFile, Link.childNodes[0])

My index.html is like this:

<head>
    <meta charset="utf-8">
    <title></title>
    <link href="css/my.css" rel="stylesheet" id="my-css">
    <link href="css/vendor.css" rel="stylesheet">
</head>

and what I expect after the function is executed is this result:

<head>
    <meta charset="utf-8">
    <title></title>
    <link href="example.css" rel="stylesheet">
    <link href="css/my.css" rel="stylesheet" id="my-css">
    <link href="css/vendor.css" rel="stylesheet">
</head>

but instead, this is what I get:

<head>
    <meta charset="utf-8">
    <title></title>
    <link href="example.css" rel="stylesheet">
    // Missing file here!
    <link href="css/vendor.css" rel="stylesheet">
</head>

I had a look at the documentation but apparently I didn't really understand how to use this.

Upvotes: 0

Views: 1654

Answers (6)

Rajshekar Reddy
Rajshekar Reddy

Reputation: 19007

Problem: The way you are using the insertBefore is wrong. Explaining the issue.

From the Docs of insertBefore This is the syntax you need to use

parentNode.insertBefore(newNode, referenceNode);

You need a parent node, Then use insertBefore on it by passing the newNode and referenceNode.

What you have is Link.insertBefore(CssFile, Link.childNodes[0]) . Here you are trying to insert CssFile to Link as parent and Link.childNodes[0] as reference.

So when you do the above the CssFile element is insertedBefore Link and hence its removed from its original position.

Solution:

So in your HTML head is the parent node. You can get it by CssFile.parentNode

New Node is Link

Reference Node is CssFile

So Replace your Link.insertBefore(CssFile, Link.childNodes[0]) by 

CssFile.parentNode.insertBefore(Link , CssFile);

Upvotes: 1

Brad
Brad

Reputation: 8698

Looking at the docs for Node.insertBefore()

var insertedNode = parentNode.insertBefore(newNode, referenceNode);

I think your problem is that you have the newNode and ReferenceNode the wrong way around. Also you need to reference the parent node.

CssFile = document.getElementById('my-css')
 Link = document.createElement('link')
 Link.href = "example.css"
 Link.type = 'text/css'
 Link.rel = 'stylesheet'
 CssFile.parentNode.insertBefore(Link, CssFile)

Upvotes: 0

Manoj Lodhi
Manoj Lodhi

Reputation: 988

Try this

HTML

<head id="my-css">
<meta charset="utf-8">
<title></title>
<link href="css/my.css" rel="stylesheet" >
<link href="css/vendor.css" rel="stylesheet">
</head>

JS

CssFile = document.getElementById('my-css')
Link = document.createElement('link')
Link.href = "example.css"
Link.type = 'text/css'
Link.rel = 'stylesheet'
CssFile.insertBefore(Link, CssFile.childNodes[4])

Upvotes: 0

Martial
Martial

Reputation: 1562

insertBefore must be used with the parent node

var CssFile = document.querySelector('[href="css/vendor.css"]'); // Peter Chon is right
var Link = document.createElement('link');
Link.href = "example.css";
Link.type = 'text/css';
Link.rel = 'stylesheet';

var parent = CssFile.parentNode;
parent.insertBefore(Link, CssFile);

Upvotes: 0

Deep
Deep

Reputation: 9804

The Node.insertBefore() method inserts the specified node before the reference node as a child of the current node.

here the reference node is 

document.getElementById('my-css')

The node where the new node need to be added is

document.querySelector("head");

You need to make the below changes in your code.

 Link = document.createElement('link')
 Link.href = "example.css"
 Link.type = 'text/css'
 Link.rel = 'stylesheet'

 document.querySelector("head").insertBefore(Link, document.getElementById('my-css'));

Plunker: https://plnkr.co/edit/MY6F4JdYPvqdYNIU7DUF?p=preview

Upvotes: 1

Peter Chon
Peter Chon

Reputation: 42

id is not a valid attribute to the link DOM. What I would recommend is selecting with .querySelector('[href="css/vendor.cs"]')

Upvotes: 0

Related Questions