プログラミング初心者で申し訳ありません。 JavaScriptを使っているのですが、ボタンを押して、～の中に数式のタグを入力しようとしています。現状のソースですが、ファイル名：sample.xhtml ～ #数式のタグの入力位置 function mul1(){ var info = document.getElementById("math"); var txt1 = document.createTextNode(" "); var txt2 = document.createTextNode("x"); var txt3 = document.createTextNode(" "); info.appendChild(txt1); info.appendChild(txt2); info.appendChild(txt3); } ～となっています。理想は x ボタンクリック後こういう感じでタグを挿入したいと考えています。 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()で検証してみたんですが、結果はなにも表示されませんでした。言葉不十分で申し訳ありませんが、解決法教えていただけませんか？よろしくお願いいたします。

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

解決済

質問者：yuchooo
質問日時：2008/12/03 19:40
回答数：3件

プログラミング初心者で申し訳ありません。
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()で検証してみたんですが、結果はなにも表示されませんでした。
言葉不十分で申し訳ありませんが、解決法教えていただけませんか？
よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： SAYKA
回答日時：2008/12/04 20:47

>問題は解決できません

alertとかを駆使してinfoの中身がどう変化したか確認してみて。
中身が入ってるのに表示されないとか言う事になったら対策が別で必要になるからね。

dumpするならinnerHTMLやinnerXMLを使うのが早いかも。
もし中身が入っているのに出ないならnamespaceがらみかもしれない。

この回答への補足

何度もありがとうございます。
私なりに駆使してみた結果を載せますね。
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()でタグを取得していますが、この方法が間違っているように思います・・・。

補足日時：2008/12/05 21:01

通報する

- 0
- 件

通報する

No.2

回答者： chenqy
回答日時：2008/12/04 00:56

まず、「math.xml」を作成する。

---------------------------------------------------------------
「math.xml」:
<math id="math"></math>

---------------------------------------------------------------
その後、下記のｈｔｍｌをご参考する

<html>
<head>
<script language="javascript">

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

この回答への補足

参考ソース・画像の記述ありがとうございます。
現在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. …
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" >
と宣下文などを追加してみたらIEではスクリプトエラーが出ました。
sample.htmlで
//ノードを取得する
var root = doc.document.getElementById("math")
に変更しましたが、解決できませんでした。。

補足日時：2008/12/04 16:48

通報する

- 0
- 件

通報する

No.1

回答者： SAYKA
回答日時：2008/12/03 20:19

・・・

element2がダメなんじゃないかな。

info.appendChild(document.createElement("mi"));
(合成すると質問のはつまり↑)

で、このappendChildとcreateElementの組みってのはぶっちゃけ↓と同じ事をしている
info.innerXML = "<mi></mi>";

この時点でelement2の使い方がオカシイのは判るんじゃないかな。
で、txtのappendの仕方もオカシイと気が付いて欲しい。(mi(element1)にappendされるべき)

この回答への補足

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

補足日時：2008/12/04 16:34

通報する