ダブルクォーテーションが消えてしまう！JavaScriptでHTMLを出力する方法

2011/06/14 11:06

このQ&Aのポイント

JavaScriptでHTMLを出力する際に、ダブルクォーテーションが消えてしまう問題に遭遇しました。ダブルクォーテーションがなくなると、スタイルシートが適用されずに困っています。
問題の発生原因は、innerHTMLを使用する際にダブルクォーテーションがエスケープされるためです。ダブルクォーテーションを正しく出力する方法を検討しています。
一つの解決策は、ダブルクォーテーションをエスケープ文字である"で置き換えることです。しかし、シングルクォーテーションが付与されるという新たな問題が発生しています。この問題に対する解決方法を教えていただけないでしょうか。

ginfix
お礼率34% (330/968)

JavaScript
回答数3
ありがとう数0

みんなの回答 （3）
専門家の回答

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

ベストアンサー

Werner
ベストアンサー率53% (395/735)

2011/06/14 23:03 回答No.3

HTMLではクォーテーションマークで属性値を囲むことは必須ではないので、　<div class ="test"> でも　<div class =test> でも同じです。スタイルシートが適用されない理由は別にあり、クォーテーションマークが消えることとは無関係です。また、innerHTMLで参照できる内容はソースコードそのものではなくブラウザが解釈した結果ですので代入した値がそのまま読み出せるなどという期待はできません。例えば、以下のコードでアラートされる文字列は、 body要素内に記述されているソースコードそのものにはならない場合があります。 <html> <head> <script> window.onload = function(){ alert(document.getElementById("aaa").innerHTML); } </script> </head> <body id="aaa"> <div class="test"></div> < > & </body> </html>

ログインすると、全ての回答が全文表示されます。

その他の回答 (2)

yambejp
ベストアンサー率51% (3827/7415)

2011/06/14 11:41 回答No.2

とりあえずIEの場合シングルクォーテーションとダブルクォーテーションの相性がよくないようですね #1さんも指摘されていますがエスケープしたクォーテーションで処理すればいけそうです <style> .test1{color:red;} .test2{font-size:2em;} </style> <div id="xxx">hoge</div> <script> htmltag ="<div class=\"test1\">fuga</div>"; alert(htmltag); document.getElementById("xxx").innerHTML=htmltag; alert(document.getElementById("xxx").innerHTML); htmltag ="<div class=\"test1 test2\">piyo</div>"; document.getElementById("xxx").innerHTML=htmltag; alert(document.getElementById("xxx").innerHTML); </script>

質問者