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

102

<head>要素のHTMLソースを編集できないようにするCMSを使用しています。

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

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

— ジテンドラ・ビアス
ソース

8

これは意味がありません... JavaScriptの実行前にヘッドが解析されます。JavaScriptを介してmeta stufをヘッドに追加しても、望ましい効果は得られません。

— Andre Haverdings、2009

1

@ミケル-はい。すべての質問の答えが私を助けます

— Jitendra Vyas

2

CMSの質問とは関係ありませんが、特定の状況でメタタグを追加することは理にかなっています。メタタグ内のデータを使用して情報を収集するさまざまなブラウザーアドオンとJavaScriptインジェクションがあります。FacebookのOpenGraphはその一例です。元のHTMLに直接アクセスできない場合は、CMSのせいか、自分でJavaScriptアドオン/インジェクションを作成しているために、メタタグをヘッドに挿入する必要があります。

— conceptDawg 2011年

<meta>タグが何であるか、どのブラウザが関係しているかによっては、タグを動的に追加しても効果がない可能性があることに注意してください。

— 2016年

良い点、それは問題に集中しすぎると起こることです;-)

— mb897038

149

それを選択して、通常どおりに追加できます。

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

— ニック
ソース

2

このリンクが配置される順序を制御するにはどうすればよいですか

— Jitendra Vyas

7

ドキュメント読む：docs.jquery.com/Manipulationを insertBefore、insertAfterあなたが望むものです。

— nickf 2009

3

これをdocument.readyに入れましたが、頭のコンテンツに追加されません

— serpent403

リンクを追加していますが、ページのビューにリンクが表示されていませんソース... Firebugなどのブラウザ開発ツールから表示できます。ソースの表示でもリンクを表示できますか？

— Pankaj Tiwari

4

@PankajTiwariコードは、サーバーから提供された元のソースではなく、現在のドキュメントに追加するため、ソースビューには表示されません。それが、FireBugとChrome Devツールがとても便利な理由です。

— Bernhard Hofmann

129

JavaScript：

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

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

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

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

— ジョシュア・ウッドワード
ソース

1

スクリプト要素で動作します！

— レイ・フォス

26

jQuery

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

JavaScript：

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

— デビッド・ヘドルンド
ソース

5

appendChildはDOM要素を必要としませんか？すなわち。var elem = document.createElement（）document.getElementsByTagName（ 'head'）[0] .appendChild（elem）;

— fredrik、2009

2

はい、そうです。...それが質問の中心部分だとは感じなかったため、その部分をそのまま残しました。また、執筆の時点では、彼が頭に入れたかったことに関する実例はありませんでした。しかし、はい、それはDOM要素である必要があります。

— David Hedlund、

10

を使用innerHTMLして、追加のフィールド文字列を連結することができます。

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

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

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

— 冗談
ソース

9

最新のブラウザー（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);

— ベニー・ノイゲバウアー
ソース

9

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

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。

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

— マラット・タナリン
ソース

それが私がでそれを行う方法ですが、それはbody本当にhead-タグ内で行うことができますか？私は印象だけが許可されたタグの下にあったbase、link、meta、title、styleとscript？

— mb897038 2016年

AFAICT、あなたはあなたのAjaxレスポンスにそれらの要素を正確に持っています。ね？

— Marat Tanalin 16年

確かに、私はそれでもヘッドタグ内のdivで動作させることができません。とにかく、Chromeは、本体のdivのコンテンツを表示するのに十分な「スマート」のようです。

— mb897038 2016年

2

あなたはおそらく答えを注意深く読んでいないでしょう。;-) DIV要素は、HTMLコードを解析するための一時的なコンテナにすぎません。DIV自体をに挿入しないでくださいHEAD。その子ノードを挿入する必要があります。回答に追加した例をご覧ください。

— Marat Tanalin、2016年

1

@GaetanL。「要素内に子要素がある間temp。」Node.firstChild（）のドキュメントを参照してください。

— Marat Tanalin

4

JavaScriptピュアを試してください：

ライブラリ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'));

— キングライダー
ソース

-5

jqueryには他のオプションがあります：

$('head').html($('head').html() + '...');

とにかくそれは働いています。JavaScriptオプションは他の人も言った、それも正しい。

— デイブ
ソース

2

これにより、既存のコンテンツが削除され、新しい要素が生成されます。これにより、動的に設定されたDOMプロパティが失われ、スクリプトが再実行されるなど、望ましくない副作用が発生する可能性があります。

— Quentin、

このため、すべてのDOMプロパティを回復するには、$（ 'head'）。html（）の前に使用する必要があります

— Dave

1

を使用しても、すべてのDOMプロパティが.html()復元されるわけではありません。（この問題の最も一般的なインスタンスであり、最も目に見えるのは、フォームに新しいフィールドを追加するために同様のコードを使用する場合です。value属性はフィールドのデフォルト値を表すため、取得して設定すると、既存のすべてがリセットされますフィールドをデフォルト値に戻します）。html()

— Quentin、

私がコードでテストしたことは確かですが、機能しており、すべてのDOMプロパティが機能しています。自分でテストしてください。IE11を使用しています

— Dave

削除される可能性のあるものもイベントです。

— Hydroper