document.write() 複数行の記述方法

投稿日 2012/08/27 更新日 2020/09/01

拙サイトの全ページ共通のフッター部分を、1箇所で集中管理できたら後々楽なので、フッター部分を外部JavaScriptにしてdocument.writeで記述することにした。で、document.writeに複数行を記述する方法をググってみたらさすが、ありましたよ丁寧な解説が。

document.write() 複数行の記述方法いろいろ | tshinobu.com

感謝感激。

色々な複数行の記述方法が提示されている中、シンプルなものが最後にありました。
各行の改行した箇所に\（バックスラッシュ）を挿入するだけで、改行やインデントをしたままのHTMLもそのままOK。イザという時の修正・変更などもしやすい。

というわけで、以下のdocument.writeに

document.write('
<!-- scroll to top BEGIN -->
<div id="scrolltotop">
 <span class="scroll-to-top lsf">up</span>
</div>
<!-- scroll to top END -->

<!-- copyright BEGIN -->
<div id="copyright">
 <span>©2012 eſzett design, Osaka Japan</span>
</div>
<!-- copyright END -->
');

各行の改行した箇所に\（バックスラッシュ）を挿入

document.write('\
<!-- scroll to top BEGIN -->\
<div id="scrolltotop">\
 <span class="scroll-to-top lsf">up</span>\
</div>\
<!-- scroll to top END -->\
\　←注意！
<!-- copyright BEGIN -->\
<div id="copyright">\
 <span>©2012 eſzett design, Osaka Japan</span>\
</div>\
<!-- copyright END -->\
');

このとき注意したいのが、上記に「注意」と書いた箇所。HTMLを読みやすいように1行以上空けている場合、この行にも\（バックスラッシュ）を挿入を忘れないこと（この行ももちろん改行してるので）。忘れるとdocument.writeの内容がブラウザに全く反映されない（けっこう焦りましたよ）。

ということで、これでフッターが一元的に管理可能となった。