it-swarm.com.de

wie man etwas in <head> durch jquery/javascript hinzufügt?

Mit CMS arbeiten, wodurch die Bearbeitung des HTML-Quellcodes für das <head>-Element verhindert wird.

Zum Beispiel möchte ich über dem <title>-Tag Folgendes hinzufügen:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
86
Jitendra Vyas

Sie können es auswählen und wie gewohnt hinzufügen:

$('head').append('<link />');
135
nickf

JavaScript:

document.getElementsByTagName('head')[0].appendChild( ... );

Machen Sie das DOM-Element wie folgt:

link=document.createElement('link');
link.href='href';
link.rel='rel';

document.getElementsByTagName('head')[0].appendChild(link);
109
Joshua Woodward

jQuery

$('head').append( ... );

JavaScript:

document.getElementsByTagName('head')[0].appendChild( ... );
25
David Hedlund

In den neuesten Browsern (IE9 +) können Sie auch document.head verwenden:

Beispiel:

var favicon = document.createElement('link');
favicon.id = 'myFavicon';
favicon.rel = 'shortcut icon';
favicon.href = 'http://www.test.com/my-favicon.ico';

document.head.appendChild(favicon);
8

Sie können innerHTML verwenden, um nur die zusätzliche Feldzeichenfolge einzugeben.

document.head.innerHTML = document.head.innerHTML + '<link rel="stylesheet>...'

Sie können jedoch nicht garantieren, dass die zusätzlichen Elemente, die Sie dem Kopf hinzufügen, nach dem ersten Laden vom Browser erkannt werden. Möglicherweise erhalten Sie beim Laden der zusätzlichen Stylesheets einen FOUC (Flash mit nicht gestylten Inhalten).

Ich habe mir die API seit Jahren nicht angesehen, aber Sie könnten auch document.write verwenden, was für diese Art von Aktion entwickelt wurde. Dies setzt jedoch voraus, dass Sie das Rendern der Seite blockieren, bis Ihre erste AJAX Anforderung abgeschlossen ist.

8
Jivings

Erstellen Sie ein temporäres Element (z. B. DIV), weisen Sie der innerHTML-Eigenschaft Ihren HTML-Code zu und hängen Sie dann seine child-Knoten nacheinander an das HEAD-Element an. Zum Beispiel so:

var temp = document.createElement('div');

temp.innerHTML = '<link rel="stylesheet" href="example.css" />'
               + '<script src="foobar.js"><\/script> ';

var head = document.head;

while (temp.firstChild) {
    head.appendChild(temp.firstChild);
}

Verglichen mit dem Umschreiben ganzer HEAD-Inhalte über ihre innerHTML wirkt sich dies nicht auf vorhandene untergeordnete Elemente des HEAD-Elements aus.

Beachten Sie, dass scripts, die auf diese Weise eingefügt werden, anscheinend nicht automatisch ausgeführt werden, während Stile erfolgreich angewendet werden. Wenn Sie also Skripts ausführen müssen, sollten Sie JS-Dateien mit Ajax laden und dann deren Inhalt mit eval() ausführen.

7
Marat Tanalin

Versuchen Sie ein Javascript pur:

Bibliothek JS:

appendHtml = function(element, html) {
    var div = document.createElement('div');
    div.innerHTML = html;
    while (div.children.length > 0) {
        element.appendChild(div.children[0]);
    }
}

Geben Sie Folgendes ein: appendHtml(document.head, '<link rel="stylesheet" type="text/css" href="http://example.com/example.css"/>');

oder jQuery:

$('head').append($('<link rel="stylesheet" type="text/css" />').attr('href', 'http://example.com/example.css'));
3
KingRider

ich weiß nicht, warum ich Jquery hasse. Ich gab Kopf eine ID von "Kopf".

<head id="head">
<meta charset="utf-8">
 <title></title>
</head>




<script type="text/javascript">
    var head = document.getElementById('head');
    if (window.screen.width<800) {
      head.innerHTML = "  <link rel='stylesheet' href='../css/gallerys.css?ver=1.2'>";
    }else {
      head.innerHTML="<link rel='stylesheet' href='../css/gallerys.css?ver=1.3'>";
    }
</script>
0
noel jose