web-dev-qa-db-ja.com

jquery / javascriptを介して<head>に何かを追加する方法は？

<head>要素のHTMLソースの編集を防ぐCMSの使用。

たとえば、<title>タグの上に次を追加します。

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

通常どおり選択して追加できます。

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

JavaScript：

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

DOM要素を次のようにします。

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

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

jQuery

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

JavaScript：

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

最新のブラウザ（IE9 +）では、 document.head も使用できます。

例：

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

innerHTMLを使用して、追加のフィールド文字列を連結するだけです。

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

ただし、最初にロードした後に、ヘッドに追加したものがブラウザーによって認識されることを保証することはできません。また、追加のスタイルシートがロードされると、FOUC（スタイル設定されていないコンテンツのフラッシュ）を取得する可能性があります。

私は長年APIを見ていませんが、 document.write を使用することもできます。これは、この種のアクション用に設計されたものです。ただし、最初のAJAXリクエストが完了するまで、ページのレンダリングをブロックする必要があります。

8
Jivings

一時的な要素（例：DIV）を作成し、HTMLコードをinnerHTMLプロパティに割り当てて、その子ノードをHEAD要素に1つずつ追加します。たとえば、次のように：

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

HEADを介してinnerHTMLの内容全体を書き換える場合と比較して、これはHEAD要素の既存の子要素にはまったく影響しません。

この方法で挿入されたscriptsは、スタイルが正常に適用される間、明らかに自動的に実行されないことに注意してください。したがって、スクリプトを実行する必要がある場合は、 Ajax を使用してJSファイルをロードし、 eval() を使用してその内容を実行する必要があります。

7
Marat Tanalin

javascript pureを試してください：

ライブラリJS：

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

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

またはjQuery：

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

なぜjqueryを使うのが嫌いなのかわかりません。私はheadに 'head'のidを与えました。

<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