プログラミング初心者で申し訳ありません。
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()で検証してみたんですが、結果はなにも表示されませんでした。
言葉不十分で申し訳ありませんが、解決法教えていただけませんか?
よろしくお願いいたします。
No.3ベストアンサー
- 回答日時:
>問題は解決できません
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()でタグを取得していますが、この方法が間違っているように思います・・・。
No.2
- 回答日時:
まず、「math.xml」を作成する。
---------------------------------------------------------------
「math.xml」:
<math id="math"></math>
---------------------------------------------------------------
その後、下記のhtmlをご参考する
<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>
---------------------------------------------------------------
ほかのxml操作関連メッソド:
//ドキュメントのヘッドを作成
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")
に変更しましたが、解決できませんでした。。
No.1
- 回答日時:
・・・
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);
}
このように訂正をしましたが、問題は解決できませんでした。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
- JavaScript javascriptでテーブルに追加した項目のid追加してローカルストレージを操作したい 5 2023/01/01 15:52
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript gasについて 1 2022/05/31 21:51
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
javaScript textareaの一行あた...
-
なぜmatchメソッドがエラーにな...
-
ジェネレーターの作り方
-
JavaScriptのフォントの大きさ
-
gas スプレッドシートがアクテ...
-
javascriptで複数キーワード検...
-
G Maps APIで同時にストリート...
-
日付チェックと正規表現
-
そろった牌を選ぶと自動的に適...
-
JavaScriptで平日のみをカウン...
-
JavaScriptを使ってXMLにタグを...
-
[Javascript] キーボードからの...
-
Java script エラー
-
GoogleMapで設定したルート上の...
-
google apps scriptの終了のさせ方
-
JavaScriptで決まった「時刻」...
-
1日1回だけ引けるjavascriptお...
-
文字を一文字ずつ表示
-
functionから別のfunctionを実...
-
Array.prototype.~の使い方に...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
google apps scriptの終了のさせ方
-
C#OpenCv V4にのエラーに関する...
-
なぜmatchメソッドがエラーにな...
-
GASでundefinedエラーが出ます
-
ジェネレーターの作り方
-
html javascript リンク先アド...
-
gas スプレッドシートがアクテ...
-
翌月を取得するGASが分かりません
-
ASP.NETのコントロールの値をJa...
-
C# 演算 奇数と偶数 表現の仕方
-
javascriptでiframeのURL変更は?
-
C#で、ContextMenuStripに動的...
-
ASP.NET MVCでObjectをjsに渡す
-
javascriptでテーブルに追加し...
-
1日1回引けるJavaScriptおみく...
-
JavaScriptを使って毎日決まっ...
-
googleスプレッドシートのApps ...
-
JavaScriptで文字列の特定文字...
-
アクセス時からのカウントダウ...
-
ローカルにあるファイルを検索...
おすすめ情報