web-dev-qa-db-fra.com

comment ajouter quoi que ce soit dans <head> via jquery/javascript?

Travailler avec le CMS, qui empêche la modification du code source HTML pour l'élément <head>.

Par exemple, je souhaite ajouter ce qui suit au-dessus de la balise <title>:

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

Vous pouvez le sélectionner et y ajouter normalement:

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

JavaScript:

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

Faire un élément DOM comme suit:

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

Dans les derniers navigateurs (IE9 +), vous pouvez également utiliser document.head :

Exemple:

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

Vous pouvez utiliser innerHTML pour concatter simplement la chaîne de champ supplémentaire;

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

Cependant, vous ne pouvez pas garantir que les éléments supplémentaires que vous ajoutez à la tête seront reconnus par le navigateur après le premier chargement et il est possible que vous obteniez un FOUC (flash de contenu non style) lors du chargement des feuilles de style supplémentaires.

Je n'ai pas regardé l'API depuis des années, mais vous pouvez aussi utiliser document.write , qui a été conçu pour ce type d'action. Toutefois, cela nécessiterait que vous empêchiez le rendu de la page jusqu'à ce que votre demande initiale AJAX soit terminée.

8
Jivings

Créez un élément temporaire (par exemple, DIV), affectez votre code HTML à sa propriété innerHTML, puis ajoutez ses nœuds child à l'élément HEAD l'un après l'autre. Par exemple, comme ceci:

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

Comparé à la réécriture de tout le contenu HEAD via sa innerHTML, cela n’affecterait en aucune manière les éléments enfants existants de l’élément HEAD.

Notez que scripts insérés de cette façon ne sont apparemment pas exécutés automatiquement, alors que les styles sont appliqués avec succès. Donc, si vous avez besoin que des scripts soient exécutés, vous devez charger les fichiers JS avec Ajax , puis exécuter leur contenu avec eval() .

7
Marat Tanalin

Essayez un javascript pur:

Bibliothèque JS:

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

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

ou jQuery: 

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

je ne sais pas pourquoi je déteste utiliser jQuery. J'ai donné à la tête un identifiant de 'tête'.

<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