IEで改行を含む文字列にpre.innerHTML=しても... 質問と回答(Q&A)  

こんにちは ゲスト さん | ログイン | ヘルプ | okyuu.com Feed Feed

総合トップ / 質問 / プログラミング 質問 / 開発言語 質問 / JavaScript 質問 / IEで改行を含む文字列にpre.innerHTML=しても...

  • Shy_thumbnail
  • (質問者)
  • 投稿時間:2009/07/02 13:44
下のhtmlをIE6で実行したところ
preタグの中の改行がうまく改行されず
空白になってしまいます。
コピペする ブログに貼る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type"
    content="text/html; charset=utf-8" />

    <title>title</title>
  </head>

  <body>
<script type="text/javascript">

<!-- 
var pre = document.createElement('pre');
pre.innerHTML = "aaa\naaa\nbbb";
document.body.appendChild(pre); 
//--> 
</script>
  </body>
</html>
IE6の仕様でしょうか? 何か解決方法はありますか?

  • 回答数 (2)
  • クリップ数 (0)
  • アクセス数 (1768)

  • 回答

InnerHTMLでの解決方法はちょっと判りませんが、上記の原因を解説してくれているサイトを見つけました。

■参考サイト:RapidShare「改行コード、pre、textarea」
http://d.hatena.ne.jp/brazil/20060917/1158465641

参考サイトによると、InnerHTMLでの挿入では、IE6は空白に置き換えられてしまうようです。
私の環境でIE6,7,8を調べてみたところ、全部この現象になりました。
どうやら、IEシリーズの仕様のようですね。

代替案として、ですが、「InnerHTML」の替わりに「createTextNode」を使用しては如何でしょうか。
こちらで同じ表現を再現してみると、IEでは「\r」又は「\n\r」を使用したときにうまく改行がされるようです。
しかし、ブラウザによって改行コードの表現がバラバラですので、サポート環境に合った改行コードをご選択して頂ければと思います。
(改行コードの表示の詳細は参考サイト参照)

  • Shy_thumbnail
  • (質問者)
  • 2009/07/02 14:58
matoateさん早速の回答ありがとうございます。smile

実は若干htmlタグが入る可能性もあるのでinnerTextやcreateTextNode
が使えないのです。ase01
 IEの場合のみ"\n"=>"<br />"に置き換えるようにしてみたいと思います。
他に良い方法がありましたら またご連絡いただけると幸いです。

0
5
回答
0
3
回答
(2009/06/09 10:50)
あなたの問題は解決しましたか?

okyuu.comはITエンジニアのための質問サイトです。あなたの質問に答えてくれるエンジニアがいるかもしれません。なんと回答率は89

はじめての方へ

バッヂ取得者一覧
setomits cyokodog edo yuta_3 matoate

カテゴリ

特集

okyuu.comポイント獲得を競って、話題の賞品をゲットしよう! okyuu.comポイント獲得を競って、話題の賞品をゲットしよう!
新しい評価指標「okyuu.comポイント」を多く獲得して、話題の賞品を手に入れよう!
ソフトウェアを公開するのが楽しい 岡野真也さん ソフトウェアを公開するのが楽しい 岡野真也さん
ソフトウェアを公開するのが面白くてたまらない。作っては公開というのが彼のやり方だが、若きエンジニアにとってはそれくらいがちょうどいいのかもしれない。
コンピュータは世界を広げる実験道具 西尾泰和さん コンピュータは世界を広げる実験道具 西尾泰和さん
プログラミング、サイエンス、デザイン マルチな彼にとって、コンピュータは未知の世界を広げるための道具であることに変わりはない。今後の展開が楽しみだ。
理想のOS開発に人生を賭ける 川合秀実さん 理想のOS開発に人生を賭ける 川合秀実さん
OSASK計画代表の川合さんは、人生の1秒を惜しみながら独自OSの開発にいそしむ。
「楽しむ」それが豊かなエンジニアになるコツ 坂井恵さん 「楽しむ」それが豊かなエンジニアになるコツ 坂井恵さん
日本MySQLユーザ会の副代表を務める坂井恵さん。技術の現場で会社運営に興味を持ち、独立起業の道を選んだエンジニアだ。
夢はエンジニアに強い影響を与える本を書くこと 松信嘉範さん 夢はエンジニアに強い影響を与える本を書くこと 松信嘉範さん
ソニーの情報シスから日本を代表するMySQLのコンサルタントに。彼が魅せられたオープンソースの世界とは?
お友達紹介機能をつかってポイントGET! お友達紹介機能をつかってポイントGET!
お友達を招待してみんなでokyuuポイントをGETしよう!
オープンソースの活動「すごく、いい」 前坂徹さん オープンソースの活動「すごく、いい」 前坂徹さん
オープンソースプロジェクトで活躍する若き新鋭。コミュニティ活動の感想を尋ねると「すごく、いい」と満面の笑み。
コンピュータは創造力を刺激する 奥一穂さん コンピュータは創造力を刺激する 奥一穂さん
天才エンジニアとしての国際的な評価も高い奥一穂さん。世間からのスマートだとの評価には「自分は広く浅くだから」とさらり。
25歳からプログラミング「泣きながら覚えた」 庄司嘉織さん 25歳からプログラミング「泣きながら覚えた」 庄司嘉織さん
25歳でプログラマーに転向した。いまやjava-jaを立ち上げるなど精力的なエンジニアだ。
Rails勉強会@東京は“キャスト”の気持ちで 諸橋恭介さん Rails勉強会@東京は“キャスト”の気持ちで 諸橋恭介さん
大学時代、偶然手にしたMacが諸橋さんにITエンジニアの道を開いた。
"シャイモード"機能を活用しよう! "シャイモード"機能を活用しよう!
こんな質問してもいいのかな?そんなときは"シャイモード"で投稿!
RX-7とサーバ運用の意外な共通点 並河祐貴さん RX-7とサーバ運用の意外な共通点 並河祐貴さん
Amazon EC2を巧みに使いこなすTIS/SonicGardenの並河さん。「腕一本で食べていきたい」とITエンジニアを目指した。
「ブラックボックスは不安でしょ」 ひろせまさあきさん 「ブラックボックスは不安でしょ」 ひろせまさあきさん
エンジニアが楽しくて仕方がない。オープンソースを組み合わせてシステムを作り上げるのが彼の矜持のようだ。
Perlの地位向上を胸に 牧大輔さん Perlの地位向上を胸に 牧大輔さん
endeworksの牧大輔さんは社団法人JPAを立ち上げ、Perlの企業利用を促進したいという。
偶然からCTOへ ライブドアCTO池邉智洋さん 偶然からCTOへ ライブドアCTO池邉智洋さん
池邉智洋さんはライブドアCTOの技術メンバーを先頭で率いる。「まずはやって見せることも大事」と語る。