getElementsByTagNameが使えない

このQ&Aのポイント
  • javascriptで動的にmetaタグを作成する方法について調査していたところ、getElementsByTagNameはsafariではうまく動かないということが分かりました。
  • そこで、他の方法でmetaタグを作成する方法を探しています。
  • 質問者が試したコードでは、getElementsByTagNameを使用してmetaタグを作成しようとしましたが、うまくいかなかったため、代替方法が必要です。
回答を見る
  • ベストアンサー

getElementsByTagNameが使えない

javascriptで下記コードを書いて動的にmetaタグを作成しようとしたところ うまくいきませんでした。調べていたところgetElementsByTagNameは safariではうまく動かないという記述があったのですが この関数に替わるものもしくはその他の方法はありますでしょうか。 var meta = document.createElement("meta"); meta.setAttribute("name", "ad-banner"); meta.setAttribute("content","test-id=xxxxx"); document.getElementsByTagName("head")[0].appendChild(meta);

質問者が選んだベストアンサー

  • ベストアンサー
  • yuu_x
  • ベストアンサー率52% (106/202)
回答No.1

jQuery 使っとこ jQuery('<meta/>', { name : 'ad-banner' ,content : 'teset-id=xxxxx' } ).appendTo( jQuery( 'head' ) );

その他の回答 (1)

  • b0a0a
  • ベストアンサー率49% (156/313)
回答No.2

document.head ただしヘッダの操作はブラウザ依存が激しいです マイナーなブラウザだとちゃんと動かないでしょう

関連するQ&A

  • Future Shop2というショッピングカート

    Future Shop2というショッピングカートを利用しています。 <head></head>部分が編集できないのでjavascriptを使用して、meta要素を追加したのですが・・・ Future Shop2というショッピングカートを利用しています。 headタグ内が編集できないのでjavascriptを使用して、head内のmeta要素を追加したのですが・・・ <script> var doc = document; var title= doc.getElementsByTagName("head")[0]; var meta = doc.createElement("meta"); meta.setAttribute("http-equiv","X-UA-Compatible"); meta.setAttribute("content","IE=Edge"); head.appendChild(meta); </script> 上記を記述して、headタグ内にmeta要素は追加はできたのですが、meta要素の中でも一番先頭に記述したい場合はどうすれば良いのでしょか? 教えていただきたいです(;_;) よろしくお願いします!

  • DOMで生成したタグにCSSが適用されない(IE)

    DOMでタグを生成した場合、IEではそのタグにCSSが適用されないのですが 何かいい解決法はないでしょうか。ちなみに試したHTMLは下記の通りです。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>test</title> </head> <body> <script type="text/javascript"><!-- A = document.createElement("div"); A.setAttribute("id", "A"); A.setAttribute("style", "color:red;"); document.body.appendChild(A); document.getElementById("A").appendChild(document.createTextNode("test")); --></script> </body> </html>

  • javascriptでカレンダーを作る方法

    下に書いてあるjavascriptを書き換えて、一番上のマスごとにはsun・mon・tue・wed・thu・fri・satと書かれ、その下の水曜日(wed)のマスから順に1~30まで一マスごとに数字を入れられ、sun・5・12・19・26は赤文字で書かれ、1より前のマスや30以降のマスは空欄のカレンダーを作るにはどうすればいいでしょうか? <!DOCTYPE html> <html lang="java"> <head> <meta charset="utf-8"> <title>sample</title> </head> <body> <script> var table=document.createElement("table"); table.setAttribute("border",1); var tbody=document.createElement("tbody"); for(var i=0;i<4;i++){ var tr=document.createElement("tr"); for(var j=0;j<7;j++){ var td=document.createElement("td"); var txt=i*7+j+1; td.appendChild(document.createTextNode(txt)); tr.appendChild(td); } tbody.appendChild(tr); } table.appendChild(tbody); document.getElementsByTagName("body")[0].appendChild(table); </script> </body> </html>

  • CSSをあとから読み込みたい。

    「CSS読み込み」クリックで、追加CSSを読み込みたいのですが、 以下のやり方でIE6以外ではできたのですがIE6で動きません。 どなたかアドバイスいただけると幸いです。 ▼JS=============================================================== function roadcss(){ if(navigator.userAgent.indexOf("MSIE") > -1){ document.createStyleSheet('/answer.css'); } else { var tag=document.createElement('link'); tag.setAttribute("type","text/css"); tag.setAttribute("rel","stylesheet"); tag.setAttribute("href","/answer.css");​ document.getElementsByTagName('head')[0].appendChild(tag); } } ▼HTML============================================================= <a href="javascript:void(0)" onClick="roadcss()">CSS読み込み</a>

  • テーブルの行削除について

    以前、テーブルの行追加について教えてもらい出来ましたが 逆に、追加された行を削除する方法を教えてください。 <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Shift_JIS"> <TITLE>行追加・削除</TITLE> </HEAD> <BODY> <TABLE BORDER="1" id="Table1"> <TR> <TH>タイトルA</TH> <TH>タイトルB</TH> </TR> <TR> <TD><INPUT TYPE="text" SIZE="18" MAXLENGTH="18" NAME="A" VALUE=""></TD> <TD><INPUT TYPE="text" SIZE="18" MAXLENGTH="18" NAME="B" VALUE=""></TD> </TR> </TABLE> <INPUT TYPE="button" VALUE="行追加" onclick="addRow()"> <INPUT TYPE="button" VALUE="行削除"> <script language="JavaScript"> function addRow() { var tbl = document.getElementById("Table1").firstChild; if (!tbl.tagName) { tbl = document.getElementById("Table1"); } var tr = document.createElement("tr"); var td1 = document.createElement("td"); var tx1 = document.createElement("input"); tx1.setAttribute("type","text"); tx1.setAttribute("size","18"); tx1.setAttribute("maxlength","18"); tx1.setAttribute("name","Cn"); tx1.setAttribute("value",""); td1.appendChild(tx1); var td2 = document.createElement("td"); var tx2 = document.createElement("input"); tx2.setAttribute("type","text"); tx2.setAttribute("size","18"); tx2.setAttribute("maxlength","18"); tx2.setAttribute("name","Cn"); tx2.setAttribute("value",""); td2.appendChild(tx2); tr.appendChild(td1); tr.appendChild(td2); tbl.appendChild(tr); } </script> </BODY> </HTML>

  • color 属性が追加できない

    <html><meta><script language="javascript"><!-- tr = document.createElement("tr"); tr.setAttribute("bgcolor", "black"); td = tr.appendChild(document.createElement("td")); td.appendChild(document.createTextNode("test")); tbody1.appendChild(tr); //--></script></head><body> <table><tbody id="tbody1"></tbody></table> </body></html> というソースなのですが,実行してもセルの背景が黒く塗りつぶされません。 setAttribute("width", "100px")などはきちんと適用されるのですが・・・。 setAttribute("style", "background-color: black;")としてもダメでした。 どのようにすればよいのでしょうか。 よろしくお願いします。

  • <img>タグを<span>でくくりたい

    Javascript初心者を脱出したい者です。 <img>タグをgetElementsByTagNameで取得し、 <span class="align_left"><img .... /></span> みたいに囲いたいと考えています。 条件として、<img>タグの親ノードは<p>タグです。 全くノウハウは知りませんが、以下のような考え方で実現できるのでしょうか? <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Insert nextContent</title> <script type="text/javascript"> <!--   window.onload = function() {     var out_span = document.createElement('span');     out_span.setAttribute('class', 'align_left');     var list = document.getElementsByTagName('img');     var img = list[0];     /* この後、       どうやって、out_span を挿入すればよいのか?      */   } //--> </script> </head> <body> <h1> IMGタグに親ノードを追加したい </h1> <p> 文ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー。 <img src="../images/logo.gif" alt="Logo" /> </p> </body> </html> ★ インデントは全角スペースで行っております。 ご教示お願いします。

  • 記述方法について

    よろしくお願いします。前回こちらで教えて頂いたソースを 基に表示するテーブルの並び方を変えたいと思っています。 理想の並び方は、例として くま さる           くま  さる ごりら  これらを→ごりら うま  うま           りす りす というように読み込んだエクセルのレコードを2列ずつにして表したいのですが、可能でしょうか? 以下のソースを基に、色々試したのですが、ブラウザ上には何も出てきません。 -------------------------------------------------------------- <html> <head> <title>TEST CSV IN</title> <script type="text/javascript"> function hoge(){ var TEST = document.getElementById("TEST"); var output = document.getElementById("OUTPUT"); var table = document.createElement("table"); table.setAttribute("border","1"); table.setAttribute("datasrc","#TEST"); var tbody = document.createElement("tbody"); var trs = new Array(); var tds = new Array(); TEST.Reset(); var rs = TEST.recordset; while (!rs.EOF){ var tbl = document.createElement("table"); table.setAttribute("border","1"); var td = document.createElement("td"); for(var i=1; i<2; i++){   var tr = document.createElement("tr");   trs[0] = document.createElement("tr");   trs[1] = document.createElement("tr");   trs[2] = document.createElement("tr"); tds[0] = document.createElement("td"); tds[1] = document.createElement("td"); tds[2] = document.createElement("td"); var img = document.createElement("img"); img.setAttribute("src",rs.fields(0)); img.setAttribute("alt",""); tds[0].appendChild(img); tds[1].innerText = rs.fields(1); tds[2].innerText = rs.fields(2); trs[0].appendChild(tds[0]); trs[1].appendChild(tds[1]); trs[2].appendChild(tds[2]); tr.appendChild(trs[0]); tr.appendChild(trs[1]); tr.appendChild(trs[2]); tbody.appendChild(tr); } rs.MoveNext; } table.appendChild(tbody); output.appendChild(table); } </script> </head> <body onload="hoge();"> CSV DATA IMPORT Ver MINO <p> <object id="TEST" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"> <param name="DataURL" value="cn.csv" /> <param name="UseHeader" value="true" /> <param name="TextQualifier" value="'"> <param name="FieldDelim" value=","> </object> <div id="OUTPUT"> </div> </body> </html> ------------------------------------------------------------- javascriptを始めたばかりなので、まだよく理解していないので 大変申し訳ありませんが、ご指導願えればと思います。 よろしくお願いします。

  • createElementによるタグ追加作成

    ボタンが押された時にPタグの中に、H1タグを挿入されるhtmlを作成しました。 ですが、ボタンを押しても addH関数に処理が流れないみたいなのです。 なぜなのでしょうか・・・。 環境は、Win7・IE9です。 よろしくお願いします。 ===以下ソース=== <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>タグの追加</title> <script type="text/javascript"> <!-- function addH(){ alert("test"); /*(1)Pタグの要素ノードオブジェクト*/ var info = document.getElementById('info'); alert(info): /*(2)新たにH1タグの要素ノードを作成する*/ var h1Node = document.createElement('h1'); /*(3)新たにテキストノードを作成する*/ var textNode = document.createTextNode('こんにちは'); /*(4)作成したテキストノードをH1タグ要素の子要素として追加する*/ h1Node.appendChild(textNode); /*(1)Pタグに、完成したH1タグを追加する*/ info.appendChild(h1Node); } --> </script> </head> <body> <p id="info"></p> <input type="button" value="H1タグ追加" onClick="addH()"> </body> </html> ===ソースここまで===

  • javascriptで困っています。教えてください

    JavaScriptで配列をPOST送信しようとしています。 <form>や<input>を作っておいてではなく、javascriptで生成する関数からしたいと思っています。以下のコードでうまくいきません。 教えていただければありがたいです。よろしくお願いします。 <!DOCTYPE html> <html> <head> <script type="text/javascript"> var ar = new Array(5); ar[0] = 111; ar[1] = 222; ar[2] = 333; ar[3] = 444; ar[4] = 555; function sampleForm(value){ var form = document.createElement('form'); document.body.appendChild( form ); var input = document.createElement('input'); input.setAttribute('type','hidden'); input.setAttribute('name','hidden_input'); input.setAttribute('value', value); form.appendChild(input); form.setAttribute('action','send.php'); form.setAttribute('method','post'); form.submit(); } </script> </head> <body> <a href=“javascript:sampleForm(ar)”>クリックしたら“samplepost”をPOST送信</a> </body> </html> send.php-------------------------------- <?php $num = isset($_POST['hidden_input']) ? $_POST['hidden_input'] : null; print "num: " . $num; ?>

専門家に質問してみよう