Question

我正在尝试将动态生成的样式表文件添加到我的标头标记中。

我遇到的问题是我需要在任何其他CSS文件之前添加此文件。

我尝试使用insertBefore()，但这似乎删除了我用作要附加元素的标识符的元素，而不是仅仅添加新元素。

以下是代码：

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

我的index.html是这样的：

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

以及执行该函数后我的期望是这个结果：

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

但相反，这就是我得到的：

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

我查看了文档，但显然我并不真正理解如何使用它。

Answer 1

问题：您使用insertBefore的方式是错误的。解释问题。

来自 insertBefore的文档这是您需要使用的语法

parentNode.insertBefore（newNode，referenceNode）;

您需要父节点，然后通过传递insertBefore和newNode在其上使用referenceNode。

你拥有的是Link.insertBefore(CssFile, Link.childNodes[0])。在这里，您尝试将CssFile插入Link作为父级，Link.childNodes[0]作为参考。

因此，当您执行上述操作时，CssFile元素会在Link之前插入，因此会从原始位置移除。

<强>解决方案：

因此，在您的HTML head中是父节点。您可以通过CssFile.parentNode

获取

新节点为Link

参考节点为CssFile

因此请将您的Link.insertBefore(CssFile, Link.childNodes[0])替换为

CssFile.parentNode.insertBefore(Link , CssFile);

Answer 2

Node.insertBefore（）方法将引用节点之前的指定节点作为当前节点的子节点插入。

这里的参考节点是

document.getElementById('my-css')

需要添加新节点的节点是

document.querySelector("head");

您需要在代码中进行以下更改。

 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

Answer 3

id不是链接DOM的有效属性。我建议选择.querySelector('[href="css/vendor.cs"]')

Answer 4

insertBefore必须与父节点一起使用

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

Answer 5

试试这个

HTML

WHERE
T1.update_date >= @d 
  OR T2.update_date >= @d
  OR T3.update_date >= @d 
  OR T4.update_date >= @d 
  OR T5.update_date >= @d 
  OR T6.update_date >= @d 
  OR T7.update_date >= @d 
  OR T8.update_date >= @d 
  OR T9.update_date >= @d 
  OR T10.update_date >= @d 
  OR T11.update_date >= @d

JS

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

Answer 6

查看Node.insertBefore()

的文档

var insertedNode = parentNode.insertBefore（newNode，referenceNode）;

我认为你的问题是你的newNode和ReferenceNode是错误的。您还需要引用parent节点。

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)

JavaScript - 如何在标头标记中添加元素

6 个答案: