• 締切済み

DOMでdocument.writeを該当部分に書き入れる

DOMで指定したエレメント内にdocument.write()で排出される文字を挿入する必要があり、実装方法に困っております……。 こんな感じです。 <div id="test"></div> <script type="text/javascript"> function func01() { document.write("<strong>書き込むデータ</strong>"); } document.getElementById("test").innerHTML = func01(); </script> これを実行しますと、当然かもしれませんが単に"書き込むデータ"がテキストでブラウザに表示されてしまい、指定したidであるtestのセクション内に出力されません。 func01()では制約上どうしてもdocument.write()を使用する必要があり、何とかこの値を<div id="test"></div>の中に書き込めないかなという状態です。 どなたかアドバイスをお願いできれば幸いです。

みんなの回答

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

No5が言うような手合いの物で、手元にscriptファイルを持って来れないというのなら、まぁdocument.writeされるであろうblockをぶっこ抜いて来るしかないね。 もしそうだとしたら document.getElementById("test").innerHTML = func01(); とfunc01()とやらが独立したjsになっている筈だから 件のfunc01が有るjsを何かしらのblockで囲んでidを振ってgetElementByIdで取り出すのが無難じゃないかな。 そうでなくてテキスト部分としては質問文の様に繋げられているなら、funcにreturnを書く事ができない筈が無いので文字列をreturnすれば良い筈だけど・・・

  • imq
  • ベストアンサー率72% (16/22)
回答No.5

察するに、 document.writeを使った何かしらのAPIがあって、 その内容は自分で変更できない… という解釈で、一応対応策を考えてみました。 <div id="test"></div> <script type="text/javascript"> // ↓何の変哲もないdocument.writeです document.write('foo'); // ↓これを実行した後は… ( function( f ) { var s = document.write; document.write = f; document.write.res = function() { document.write = s; } })( function() { el = document.getElementById( 'test' ); return function( t ) { el.innerHTML += t; }; }() ); // ↓id="test"に書き出される document.write('bar'); // このメソッドを実行すると… document.write.res(); // ↓元のdocument.writeに戻る document.write('baz'); </script>

  • Chary_spy
  • ベストアンサー率40% (75/183)
回答No.4

>制約上どうしてもdocument.write()を使用する必要があり たぶん、あなただけがそう思っているのでは。 と言うのも、何をしたいのか、よくみると記載されていません。 innerHTMLは、テキストの代入メソッドですよね。 それに関数を指定すれば、その結果(戻り値)はテキストでないと動作しませんよね。 document.writeは、documentオブジェクトに対して書き込む命令であって、ストリームやパイプに書き込む事はできません。そこが勘違いをしています。 つまり、DOSやCでいえば標準出力に出力する関数を指定する必要があるわけです(echo or printf)。

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.3

関数の中のwindow.document.write()の documentオブジェクトは何故グローバルではないのだろう? ECMAに定義されているのかしら

回答No.2

回答1さんがいいたいことは、document.write()を使う使わないの問題ではなく、 return "<strong>書き込むデータ</strong>" をfunc01()に「追加」したら?ということだと思うんだけど。それも禁止?

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

なんで書き込む文字列をreturnさせないの? innerHTMLに代入が何事だか もうちょっと理解した方が良いのでは・・・ http://www.google.com/search?lr=lang_ja&q=javascript%20innerHTML

everyai
質問者

補足

ありがとうございます。が、returnで書き込めないので質問をしてたりします。

関連するQ&A

  • innerHTMLにて設定した情報を再度取得する事は可能でしょうか?

    innerHTMLにて指定idタグ情報を変更する事は出来るのですが、innerHTMLにて設定した情報を再度取得する事は可能でしょうか? 下記のコードを考えてみたのですが、 再取得出来ません。 環境はXPでIE6とFF3です。 ご教授よろしくお願いします。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP"> <title>DOM情報の再取得</title> <script type="text/javascript" language="JavaScript"> <!-- function setText1(data) { document.getElementById("test1").innerHTML = data; return false; } function setText2(data) { document.getElementById("test2").innerHTML = data; return false; } function setText3(data) { document.getElementById("test3").innerHTML = data; return false; } //--> </script> </head> <body> <div id="test1"></div> <div id="test2"> </div> <div id="test3">テスト3</div> <br> <a href="javascript:void(0);" onClick="setText1('セットテスト1'); return false;">1</a> <a href="javascript:void(0);" onClick="setText2('セットテスト2'); return false;">2</a> <a href="javascript:void(0);" onClick="setText3('セットテスト3'); return false;">3</a> <script type="text/javascript" language="JavaScript"> <!-- document.write("<br><br>\n"+'再取得'+"<br><br>\n"); //document.write("js_test1="+document.getElementById("test1").childNodes[0].nodeValue+"<br>\n");//エラーになるのでコメントアウト document.write("js_test2="+document.getElementById("test2").childNodes[0].nodeValue+"<br>\n"); document.write("js_test3="+document.getElementById("test3").childNodes[0].nodeValue+"<br>\n"); //--> </script> </body> </html>

  • JavaScript表示切替の問題

    ボタンを押すたびに、こんにちはとこんばんはが切り替わるようにしたいのですが、 切り替わりません。なぜかわかる方がいたら教えて頂けると助かります。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <div id="1">こんにちは</div> <input type="button" value="切替" onclick="func_switch()"> <script language="javascript" type="text/javascript"> function func_switch(){ if(document.getElementById(1).innerHTML="こんにちは"){ document.getElementById(1).innerHTML="こんばんは"; } else{ document.getElementById(1).innerHTML="こんばんは"; } } </script> </body> </html>

  • セレクト部品の表示内容

    が選択されているかどうかによって変化するようにしたいのですが 以下のようにしてもうまくいきません。 何か解決策はないでしょうか? <script> function func() { document.getElementById("00").innerHTML="00.aa"; document.getElementById("01").innerHTML="01.bb"; } function func2() { document.getElementById("00").innerHTML="00"; document.getElementById("01").innerHTML="01"; } </script> <select onfocus="func()" onblur="func2()"> <option value="00"><span id="00">00</span></option> <option value="01"><span id="01">01</span></option> </select>

  • writeメソッドでレイヤーに書き出す

    こんばんは。 JavaScriptを勉強していて、いくらかの本を買いました。 そこのリファレンスの「writeメソッド」に、 『文字列を書き出すドキュメントオブジェクトモデルの指定は、 フレーム.documentや、レイヤー.document』 と、書いてありました。 フレームのほうは書き出しで来たのですが、 レイヤーのほうがうまく出来ません。 <div id="data" name="data"></div> <script> document.getElementById('data').document.write('str'); </script> 上のようにやりました。 他にも、 data.write('str'); document.data.write('str'); document['data'].write('str'); 等々・・・ これは、NN用のものなのでしょうか。 NNをもっていないのでわかりません。 レイヤーというものがDIVにすること自体が間違っているのでしょうか。 教えてください。

  • innerHTMLを使い、書き換えたい

    はじめまして。innerHTMLで文章を書き換えたいと思っています。 ■■■■■■■■■■■■ <div id='testid'>元の文章</div> <SCRIPT Laguage="JavaScript"><!-- document.getElementById('testid').innerHTML  = "この文章に書き換える"; --></SCRIPT> ■■■■■■■■■■■■ とするとうまく<div>内の文章が書き換わるのですが、 以下のようにjavascriptの記述を先に持ってくるとうまくいきません。 ■■■■■■■■■■■■ <SCRIPT Laguage="JavaScript"><!-- document.getElementById('testid').innerHTML  = "この文章に書き換える"; --></SCRIPT> <div id='testid'>元の文章</div> ■■■■■■■■■■■■ 検索して調べたところ、 「関数化させて id を指定したタグが表示されてから命令を実行させる」 必要があるとのことなのですが、書き方がわからずにいる次第です。 どなたかご教示いただければ幸いです。

  • なぜfunc()で動き、funcで動かないのか。

    以前良く似た質問をしましたが、また疑問点が出たので質問します。 前回は、以下のコードでなぜonload = funcで動作し、onload = func()では動作しないのかをお聞きしました。 var img = new Image(); window.onload = function() { img.onload = func; } function func() { (省略) } その結果、funcだと関数を指定し、func()だと関数の返り値を代入するという答えを頂きました。 しかし自分で実験してみたところ、以下のコードでは逆の結果になりました。 window.onload = function() { document.getElementById("result1").onload = result1; document.getElementById("result2").onload = result2(); } function result1() { document.getElementById("result1").innerHTML = "result1"; } function result2() { document.getElementById("result2").innerHTML = "result2"; } <div id="result1"></div> <div id="result2"></div> onload = result2()の方は期待通りの結果が得られましたが、onload = result1ではdiv要素に文字列は挿入されませんでした。onloadによって実行される関数をfunc形式で指定したのになぜ動作せず、func()形式のもののみ動作したのでしょうか? あと蛇足になりますが、このようなコードも試してみましたが、どちらもうまくいきませんでした。 window.onload = function() { document.getElementById("result1").onload = result1; document.getElementById("result2").onload = result2(); } function result1() { this.innerHTML = "result1"; } function result2() { this.innerHTML = "result2"; } <div id="result1"></div> <div id="result2"></div> 両方のfunction内のthisはdocument.getElementById("result1")またはdocument.getElementById("result2")を指すのではないのでしょうか?

  • 【javascript】document.getElementByIdは一つしか使えないの?

    以下をhtmlをブラウザで見ると、文字列"aaa"は表示されますが、"bbb"は表示されません。 <html> <head> <SCRIPT LANGUAGE='JavaScript1.2'><!-- function init(){ document.getElementById("a").innerHTML="aaa"; document.getElementById("b").innerHTML="bbb"; } //--></script> </head> <body onload="init()"> <div id="a"></dev> <div id="b"></dev> </body> </html> ブラウザはIE,FFと試しましたが共に同じ結果でした。 FFのエラーコンソールには document.getElementById("b").innerHTML="bbb" is null のエラーメッセージが出てましたが、文法的に何が問題なのでしょうか?

  • JavascriptのDOMについて

    JavascriptのDOMについて <textarea id="ta"></textarea> というHTMLがあり、Javascriptで、 document.getElementById("ta").value = "test"; とすれば表示されますが、この .valueプロパティを知らずに最初 .innerHTMLとしていました。 textareaのプロパティで書き込むのはvalueと知る方法が知りたいです。 知らない人は.valueすら想像できません。 皆さんは、どのようにしてプロパティを見つけているのでしょうか?

  • innerHTMLで、関数での記載内容を希望のエリアに表示したい。

    お世話になります。 下記のように行うと、 「実際は、いろいろと表示したい」 が、 「aaaaaaaaaaaaaaaaaa」 の下に表示されてしまいます。 また、 <div id="DspArea"> の位置には、undefined と、表示されてしまいます。 document.getElementById("DspArea").innerHTML="tst"; とすれば、 <div id="DspArea"> の位置に正確に表示されます。 innerHTMLで、関数で記載したタグを含む文字列を表示させるには何か気をつけなければならないことがあるのでしょうか。 よろしくご教示お願いします。 <script type="text/javascript"><!-- function dspTst(){ document.write('実際は、いろいろと表示したい'); } // --> </script> <div> <div id="DspArea"> </div> <div> aaaaaaaaaaaaaaaaaaaa </div> </div> <script type="text/javascript"><!-- document.getElementById("DspArea").innerHTML=dspTst(); // --> </script>

  • Javascriptで文字の書き換え

    現在、IE8とChromeを使用しています。 どちらのブラウザで試してもdocument.write("文");は読み込みますが <id>で指定したタグの中身が変わりません。 javascriptに書いたinnerHTML及びinnerTextの使い方か、もしくは、 根本的なところを何処か間違っているでしょうか? -----------HTML文------------------------------------------------------ <!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>2011_09_02_1</title> <link rel="stylesheet" href="2011_09_02_1.css"> <script type="text/javascript" src="2011_09_02_1.js"></script> <body> <div id="str"><h3>Good morning</h3></div> </body> </html> ---------------外部CSS文----------------------------------------------- div h3{ color:#0000ff; } ---------------外部javascript文------------------------------------------ //タグを含む書き換え用ソース document.write("読み込むかテスト"); var chenge; chenge = document.getElementById(str); chenge.innerHTML = "Good Night"; ---------------------------------------------------------- //下は後から試した文--------文字のみ書き換え用ソース document.write("読み込むかテスト"); //document.getElementById("str").innerText = "Good Night"; --------------------------------------------------------------------------

専門家に質問してみよう