JavaScript - wie ein Element im Header-Tag vorangestellt wird

Ich versuche, eine Stylesheet-Datei, die dynamisch in meinem Header-Tag generiert wird, voranzustellen.JavaScript - wie ein Element im Header-Tag vorangestellt wird

Das Problem, das ich habe, ist, dass ich diese Datei vor allen anderen CSS-Dateien hinzugefügt werden muss.

Ich versuchte mit insertBefore(), aber das scheint das Element, das ich verwende, als eine Kennung für das Element, das angehängt werden soll, anstatt nur das neue darüber zu hängen.

Hier ist der 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])

Meine index.html ist wie folgt:

<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>

und was ich nach der Funktion erwarten ausgeführt wird, ist dieses Ergebnis:

<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>

aber stattdessen ist das, was ich bekomme:

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

Ich habe mir die Dokumentation angesehen, aber anscheinend habe ich nicht wirklich verstanden, wie man das benutzt.

Quelle

2016-12-20 Nick

@RajshekarReddy Fehler behoben. Entschuldigung – Nick

Problem: Die Art, wie Sie die insertBefore verwenden, ist falsch. Erklären Sie das Problem.

Aus der Docs von insertBefore Dies ist die Syntax, die Sie

parentNode.insertBefore (newNode, referenceNode) verwenden müssen;

Sie benötigen einen übergeordneten Knoten, dann insertBefore auf sie verwenden, um die newNode und referenceNode indem.

Was Sie haben, ist Link.insertBefore(CssFile, Link.childNodes[0]). Hier versuchen Sie, CssFile zu Link als Eltern und Link.childNodes[0] als Referenz einzufügen.

Also wenn Sie das obige tun, wird das CssFile Element eingefügt Vor Link und daher ist es aus seiner ursprünglichen Position entfernt.

Lösung:

Also in Ihrem HTML head ist der übergeordnete Knoten.Sie können es von CssFile.parentNode

New Node ist Link

Referenz Node CssFile

So ersetzen Sie Link.insertBefore(CssFile, Link.childNodes[0]) von

CssFile.parentNode.insertBefore(Link , CssFile);

Quelle

2016-12-20 16:47:03

Ehrfürchtig. Vielen Dank für die Erklärung. Es hat perfekt funktioniert;) – Nick

@Nick Gut zu helfen .. Happy Coding !! –

ID ist kein gültiges Attribut für den Link DOM. Was ich empfehlen würde, ist mit .querySelector('[href="css/vendor.cs"]')

Quelle

2016-12-20 16:29:52

Die Node.insertBefore() -Methode den angegebenen Knoten Einsätze vor der Referenzknoten als Kind des aktuellen Knotens.

hier der Referenzknoten ist

document.getElementById('my-css')

Der Knoten, an dem der neue Knoten hinzugefügt werden müssen, ist

document.querySelector("head");

Sie müssen die folgenden Änderungen in Ihrem Code machen.

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

Quelle

2016-12-20 16:47:13 Deep

insert muss mit dem übergeordneten Knoten

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);

Quelle

2016-12-20 16:47:55 Martial

diesem

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 Versuchen verwendet werden

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])

Quelle

2016-12-20 16:50:27

bei der Dokumentation der Suche nach Node.insertBefore()

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

Ich denke, Ihr Problem ist, dass Sie den newNode und ReferenceNode falsch herum haben. Außerdem müssen Sie auf den Knoten parent verweisen.

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)

Quelle

2016-12-20 16:50:46 Brad

Wenn Sie eine Antwort abstimmen, erläutern Sie bitte, warum Sie die Antwort nicht für nützlich halten. – Brad

JavaScript - wie ein Element im Header-Tag vorangestellt wird

Antwort

Verwandte Themen