JavaScript document.writeについて

<ul id="font-size-change">
<li><a href="javascript:void(0)" onclick="setActiveStyleSheet('default'); return false;" />標準</a></li>
<li><a href="javascript:void(0)" onclick="setActiveStyleSheet('large'); return false;" />大</a></li>
</ul>

上記を、JavaScriptの「document.write」を使って表示しようと、下記のコードを書きました。

function fontSizeChange(){
document.write('<ul id="font-size-change">');
document.write('<li><a href="javascript:void(0)" onclick="setActiveStyleSheet');
document.write("('default'); ");
document.write('return false;" />標準</a></li>');
document.write('<li><a href="javascript:void(0)" onclick="setActiveStyleSheet');
document.write("('large'); ");
document.write('return false;" />大</a></li>');
document.write('</ul>');
}

とっても効率が悪い記述だと思うのですが、
もっとシンプルで効率の良い書き方はないでしょうか。

よろしくお願いします。

No.1 回答者： TOMO_MORI 回答日時： 2008/08/05 11:21

便乗ですが、私もこの回答を探しています。

perl でいう以下のようなことがdocument.writeか何かでできるのでしょうか？

print <<'EOF';
出力文章１
出力文章２
EOF

No.2 回答者： TOMO_MORI 回答日時： 2008/08/05 11:29

追伸ですが、以下の方法なら可能なことはわかっているのですが・・・・

document.write("" +
"出力文章１" +
"出力文章２" +
"出力文章３");

この回答へのお礼

回答ありがとうございます。

なるほど、「+」でつなぐことが出来るのですか。
document.writeを1回書くだけですむのが良いですね。
さっそく使わせていただきます。

お礼日時：2008/08/05 14:44

No.3 ベストアンサー 回答者： volonte 回答日時： 2008/08/05 19:01

document.write("<ul id='font-size-change'>

<li><a href='javascript:void(0)' onclick='setActiveStyleSheet(\"default\"); return false;' />標準</a></li>
<li><a href='javascript:void(0)' onclick='setActiveStyleSheet(\"large\"); return false;' />大</a></li>
</ul>");
これでいけますよ。
囲むときは
"→'→\"
で囲めます。
改行したいなら他の回答者さんのように+を使って区切ってくださいね

この回答へのお礼

>囲むときは"→'→\"で囲めます。

エスケープ文字は一度試してうまくいかず諦めていたのですが、
なるほど、順番があったのですね。ありがとうございます。

見やすいように改行もしたいので、お二人様から教えていただいた方法を足して利用させていただきます。

ありがとうございました。

お礼日時：2008/08/05 19:48

No.4 回答者： Werner 回答日時： 2008/08/06 06:00

document.write("\

<ul id=\"font-size-change\">\
<li><a href=\"javascript:void(0)\" onclick=\"setActiveStyleSheet('default'); return false;\" />標準</a></li>\
<li><a href=\"javascript:void(0)\" onclick=\"setActiveStyleSheet('large'); return false;\" />大</a></li>\
</ul>\
");

改行をエスケープしてみたら動いた。

この回答へのお礼

改行もエスケープで行けるのですか。これはまったく思いつきませんでした。
かなりシンプルになりますね。

ありがとうございます。

お礼日時：2008/08/06 08:54