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.3

volonte · ベストアンサー

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>");
これでいけますよ。
囲むときは
"→'→\"
で囲めます。
改行したいなら他の回答者さんのように+を使って区切ってくださいね

お礼

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

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

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

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

回答No.4

Werner

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>\
");

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

お礼

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

ありがとうございます。

回答No.2

TOMO_MORI

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

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

お礼

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

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

回答No.1

TOMO_MORI

便乗ですが、私もこの回答を探しています。
perl でいう以下のようなことがdocument.writeか何かでできるのでしょうか？

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