• ベストアンサー

JavaScriptを使ってXMLにタグを打ち込みたいんですが。。

プログラミング初心者で申し訳ありません。 JavaScriptを使っているのですが、ボタンを押して、<math>～</math>の中に数式のタグを入力しようとしています。 現状のソースですが、 ファイル名：sample.xhtml ～ <math id="math" xmlns="http://www.w3.org/1998/Math/MathML"> #数式のタグの入力位置 </math> <script type="text/javascript"> function mul1(){ var info = document.getElementById("math"); var txt1 = document.createTextNode("<mi>"); var txt2 = document.createTextNode("x"); var txt3 = document.createTextNode("</mi>"); info.appendChild(txt1); info.appendChild(txt2); info.appendChild(txt3); } </script> <form> <input type = "button" value="x" onclick ="mul1()" /> </form> ～ となっています。 理想は <math id="math" xmlns="http://www.w3.org/1998/Math/MathML"> 　<mi>x</mi> </math> ボタンクリック後こういう感じでタグを挿入したいと考えています。 function mul1(){ var info = document.getElementById("math"); var element1 = document.createElement("mi"); var element2 = document.createElement("/mi"); var txt = document.createTextNode("x"); info.appendChild(element1); info.appendChild(txt); info.appendChild(element2); } 要素追加と思いcreateElement()で検証してみたんですが、結果はなにも表示されませんでした。 言葉不十分で申し訳ありませんが、解決法教えていただけませんか？ よろしくお願いいたします。

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

  • ベストアンサー
  • SAYKA
  • ベストアンサー率34% (944/2776)
回答No.3

>問題は解決できません alertとかを駆使してinfoの中身がどう変化したか確認してみて。 中身が入ってるのに表示されないとか言う事になったら対策が別で必要になるからね。 dumpするならinnerHTMLやinnerXMLを使うのが早いかも。 もし中身が入っているのに出ないならnamespaceがらみかもしれない。

yuchooo
質問者

補足

何度もありがとうございます。 私なりに駆使してみた結果を載せますね。 SAYKAさんの指摘後alert(info)で一度確認をしてみました。 [object Element] と表示されました。 function mul1(){ var info = document.getElementById("math"); info.innerXML="<mi></mi>"; alert(info); } に変更してやってみましたが。結果は変わりませんでした。 function()の中身を試しに var info = document.getElementById("math"); var element = document.createTextNode("x"); info.appendChild(element); alert(info); に変更やってみました。 xは表示されますがアラートでは[object Element]と表示されます。 これらの結果を見てみると、値が入ってないようですね・・・ getElementById()でタグを取得していますが、この方法が間違っているように思います・・・。

その他の回答 (2)

  • chenqy
  • ベストアンサー率33% (1/3)
回答No.2

まず、「math.xml」を作成する。 --------------------------------------------------------------- 「math.xml」: <math id="math"></math> --------------------------------------------------------------- その後、下記のｈｔｍｌをご参考する <html> <head> <script language="javascript"> <!-- function createXML() { var doc = new ActiveXObject("Msxml2.DOMDocument"); //math.xmlをロードする doc.load("math.xml"); //rootノードを取得する var root = doc.documentElement; //サブノードを作成する var sub = doc.createElement("mi"); //サブノードにテキストを格納する sub.text = "x"; //rootノードにサブノードを格納する root.appendChild(sub); if(root) { //docのxmlを表示する alert(root.ownerDocument.xml); } } //--> </script> </head> <body> <form> <input type = "button" value="x" onclick ="createXML()" /> </form> </body> </html> --------------------------------------------------------------- ほかのｘｍｌ操作関連メッソド： //ドキュメントのヘッドを作成 var p = doc.createProcessingInstruction("xml","version=\"1.0\" encoding=\"Shift_JIS\""); //ドキュメントのヘッドを格納する doc.appendChild(p); //ノードを作成(作成方法は2種類がある) var root = doc.createElement("students"); var root2 = doc.createNode(1,"students",""); //プロパティーを作成 var r = doc.createAttribute("id"); r.value="test"; //ノードにプロパティーをセットする root.setAttributeNode(r); //ノードからプロパティーを削除する root.removeAttribute("id"); //ノードをコピーする var m = root2.cloneNode(true); root.appendChild(m); //ノードを削除 root.removeChild(root.childNodes(0)); //DATASectionを作成 var c = doc.createCDATASection("this is a cdata"); c.text = "hi,cdata"; //DATASectionを格納 root.appendChild(c); //rootノードをdocに格納 doc.appendChild(root); //ノードを取得 var a = doc.getElementsByTagName("ttyp"); //ノードのプロパティーを表示 for(var i= 0;i＜a.length;i++) { alert(a[i].xml); for(var j=0;j＜a[i].attributes.length;j++) { alert(a[i].attributes[j].name); } }

画像を拡大する
yuchooo
質問者

補足

参考ソース・画像の記述ありがとうございます。 現在FireFoxを使っているので var doc = new ActiveXObject("Msxml2.DOMDocument"); ↓ var doc =document.implementation.createDocument("", "", null); と変更して実行させてみたんですが、アラートは表示されませんでした。 math.xmlに <?xml version="1.0" encoding="Shift_JIS" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN" "http://www.w3.org/TR/MathML2/dtd/xhtml-math11-f.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" > と宣下文などを追加してみたらIEではスクリプトエラーが出ました。 sample.htmlで //ノードを取得する var root = doc.document.getElementById("math") に変更しましたが、解決できませんでした。。

  • SAYKA
  • ベストアンサー率34% (944/2776)
回答No.1

・・・ element2がダメなんじゃないかな。 info.appendChild(document.createElement("mi")); (合成すると質問のはつまり↑) で、このappendChildとcreateElementの組みってのはぶっちゃけ↓と同じ事をしている info.innerXML = "<mi></mi>"; この時点でelement2の使い方がオカシイのは判るんじゃないかな。 で、txtのappendの仕方もオカシイと気が付いて欲しい。(mi(element1)にappendされるべき)

yuchooo
質問者

補足

早速の指摘ありがとうございます。 element2を消して、 function mul1(){ var info = document.getElementById("math"); var element1 = document.createElement("mi"); var txt = document.createTextNode("x"); info.appendChild(element1); element1.appendChild(txt); } このように訂正をしましたが、問題は解決できませんでした。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • XMLのネームスペースの指定・変更・削除ができません。。

    Javascriptを使ってMathMLの<math></math>にタグを追加したいと考えています。 ファイル名：sample.xhtml ソース： <?xml version="1.0" encoding="Shift_JIS" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN" "http://www.w3.org/TR/MathML2/dtd/xhtml-math11-f.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <meta http-equiv="content-type" content="text/html;charset=shift_jis" /> <meta http-equiv="content-script-type" content="text/javascript" /> </head> <body> <math id="math" xmlns="http://www.w3.org/1998/Math/MathML"> </math> <br /> <script> function moji(){ var info = document.getElementById("math"); var element = document.createElement("mi"); element.innerHTML= "x"; info.appendChild(element); } </script> <form> <input type = "button" value="x" onclick ="moji()" /> </form> </body> </html> これを実行し、ボタンを押すと"X"は表示されるんですが、 javascript: void window.open("","","").document.write("<textarea cols=80 rows=20>" + document.body.parentNode.innerHTML + "</textarea>") これを使ってテキストに結果を吐き出してみると <math id="math" xmlns="http://www.w3.org/1998/Math/MathML"> <mi xmlns="http://www.w3.org/1999/xhtml">x</mi> </math> このような感じで追加されてしまいます。 ネームスペースの問題だと思うんですが、解決方法がまったく分かりません。 element.removeAttributeNS(null,"xmlns");でネームスペースを削除しようと思いましたが、削除されませんでした。 こういった場合、どうしたらいいでしょうか。 よろしくおねがいします。

    • ベストアンサー
    • XML
  • 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>

  • カウントアップ

    ｘｍｌの勉強中にわからないことがでてきたので質問します ｘｍｌを使用しての掲示板の作成中なのですが 以下のようなソースを記述しました。 //カウントアップ処理 Count count = new Count(); //ノードを作成し、文字列を代入 contribute.setAttribute("no", "1"); Element titlenode= document.createElement("title"); contribute.appendChild(titlenode); titlenode.appendChild(document.createTextNode(title)); Element namenode= document.createElement("name"); contribute.appendChild(namenode); namenode.appendChild(document.createTextNode(name)); Element mailnode= document.createElement("mail"); contribute.appendChild(mailnode); mailnode.appendChild(document.createTextNode(mail)); Element hpnode= document.createElement("hp"); contribute.appendChild(hpnode); hpnode.appendChild(document.createTextNode(hp)); Element urlnode= document.createElement("url"); contribute.appendChild(urlnode); urlnode.appendChild(document.createTextNode(url)); Element textnode= document.createElement("text"); contribute.appendChild(textnode); textnode.appendChild(document.createTextNode(text)); contribute.setAttribute("no", "1"); この行の"1"の部分を1～10などのようにカウントアップさせたいのですが ネットなどで調べてもわかりません。 条件として、Countという別のクラスを作成しそちらでカウントアップしたものを上記ソースで読み込むという処理がしたいのです。 初歩的な質問で情けないのですが、よろしくお願いします。

    • 締切済み
    • XML
  • javascript マウスイベント

    動的に生成したテーブルのマウスイベントについてご質問します。 var body = document.getElementsByTagName("body")[0]; var tbl = document.createElement("table"); var tblBody = document.createElement("tbody"); for (var j = 0; j < 20; j++) { var row = document.createElement("tr"); for (var i = 0; i < 1; i++) { var cell = document.createElement("td"); var cellText = document.createTextNode("cell is row "+j+", column "+i); cell.id="dt1"; cell.height="15" cell.appendChild(cellText); row.appendChild(cell); } tblBody.appendChild(row); } tbl.id="tbl1"; tbl.width="200" tbl.appendChild(tblBody); body.appendChild(tbl); 上記のようなソースでテーブルを作成しています。 tbl.onmousedown このあたりだと思うのですが、記述方法がわからず困っています。 具体的には下記のような動きを目指してます。 http://www.programming-magic.com/20071215024226/ 初歩的な質問かもしれませんが、ご教授頂けると幸いです。

  • 「option」の追加におけるselectedの指定での動作は？

    「createElement」を用いて、ドロップダウンのoptionを追加するスクリプトを 作成しました。 このドロップダウンでは、月・日を選択するもので当日の日付をselected の属性を 付けたいと考え、つぎのコードを作成しましたが、当月が選択されたところで スクリプトが止まってしまう（抜けている）のです。 function appendTest(frmParts1,frmParts2,frmParts3){ if (!document.createElement) return; strDate = new Date(); for (ii = 1;ii < 13;ii++){ var ele = document.createElement("option"); ele.value = ii; var str = document.createTextNode(ii); ele.appendChild(str); document.info_inp.elements[frmParts2].appendChild(ele); } // alert("ok1"); document.info_inp.elements[frmParts2].options[strDate.getMonth()].selected = true; for (ii = 1;ii < 32;ii++){ var ele = document.createElement("option"); ele.value = ii; var str = document.createTextNode(ii); ele.appendChild(str); document.info_inp.elements[frmParts3].appendChild(ele); } // alert("ok2"); document.info_inp.elements[frmParts3].options[strDate.getDate()-1].selected = true; } コメントにしている alert(); を生かすと、想定どおりに当日の日付が選択されますが、 何故alert(); を外すと想定した動作が行われないのかがわかりません。 selectedを指定する行を外せば全く問題ない動作をするようですが、これでは 当日の日付が選択された状態にはなりません。 なんとかして「日付が選択された状態」にしたいのですが、何らかの処理が 欠けているのでしょうか。 どなた様かご教示願います。

  • borderの指定方法

    var tbl = document.createElement("table"); var tbd = document.createElement("tbody"); var tr = document.createElement("tr"); var td = document.createElement("td"); td.appendChild(document.createTextNode("テストテーブル")); tr.appendChild(td); tbd.appendChild(tr); tbl.appendChild(tbd); DOMで書いたテーブルのTD要素のボーダーの指定方法で、下線だけ表示しないで枠をつけたいのですが、どのようにすればよいのでしょうか？ どなたか教えてください。 よろしくお願いします。

  • 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のパフォーマンスについて ブラウザはWindows IE8限定とします。 HTMLファイルのDOCTYPE宣言によって標準準拠/後方互換モードを切り替えられますが、 下記JavaScriptをそれぞれで走らせた場合、明らかに標準準拠モードが遅いです。 この差の原因は何なのでしょうか。 後方互換モード程度にまで速度を改善することはできないのでしょうか。 for (var i = 0; i < 10000; i++) { var t = document.createTextNode(i + ", "); var o = document.createElement("div").appendChild(t); document.getElementById("test").appendChild(o); }

  • phpでxmlが動かない macOsXLion

    phpでxmlの練習をしてるんですが全く動作しません。なんででしょうか？ コードを次に書きます。 <?php $doc = new DOMDocument; // DOMDocumentのインスタンス生成 $root = $doc->createElement("cars"); 　// root要素を作成する $doc->appendChild($root); // docの子としてrootを追加する $elm1 = $doc->createElement("car"); // car要素を作成する $root->appendChild($elm1); // car要素をrootの子として追加する $txt1 = $doc->createTextNode("スポーツカー"); // テキストノードを作成する $elm1->appendChild($txt1); // テキストノードをテキスト要素としてelm1の子として追加する $elm2 = $doc->createElement("car"); // car要素を作成する $root->appendChild($elm2); // rootの子としてcar要素を追加する $txt2 = $doc->createTextNode("トラック"); // テキストノードを作成する $elm2->appendChild(txt2); // elm2にtxt2を追加する print $doc->saveXML(); ?> よろしくお願いします。

    • ベストアンサー
    • PHP
  • appendChildとinnerHTMLを短く

    テーブルのthタグと内容を追加したい ・下記で期待通り動作するのですが、冗長かなと思い、スッキリさせたいです ・どうすれば良いでしょうか？ var tr = document.createElement("tr"); tbody.appendChild(tr); var th = document.createElement("th"); th.innerHTML = '見出1'; tr.appendChild(th); var th = document.createElement("th"); th.innerHTML = '見出2'; tr.appendChild(th); var th = document.createElement("th"); th.innerHTML = '見出3'; tr.appendChild(th); var th = document.createElement("th"); ……

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する