複数行のhtmlコードをJavaScript記述内で分かり易くし、表示させる方法



今まではdocument.writeを使用し、複数行の文字列は改行や空白を除去し表示させてましたが、
何だか面倒になってきたので複数行のものはなるべくそのまま利用出来ないかやってみました。

1.CSSの記述例

以下は任意です。

<style type="text/css">
<!--
#idWrap{
	width:800px;
	margin:0 auto;
}
#idFukusuClk{
	cursor:pointer;
	margin:auto;
	width:150px;
	text-align:center;
	padding:15px;
	background-color:#666666;
	color:#FFFFFF;
	border:solid 1px #666666;
}
#idFukusuClk:hover{
	cursor:pointer;
	margin:auto;
	width:150px;
	text-align:center;
	padding:15px;
	background-color:#FFFFFF;
	color:#000000;
	border:solid 1px #000000;
}

#idFukusuArea{
	cursor:pointer;
	margin:auto;
	width:700px;
	border:dotted 1px #333333;
}
p{
	padding:20px;
	font-size:14px;
	text-align:center;
}
-->
</style>

2.JavaScriptの記述例

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#idFukusuClk").click(function(){
		
var str_work=''
+'							<ul id="sitemap_list" class="sitemap_disp_level_0">'
+'<li class="home-item"><a href="http://www.blinderhidden.com" title="BLINDER HIDDEN">BLINDER HIDDEN</a></li>'
+'<li class="page_item page-item-2"><a href="http://www.blinderhidden.com/about">ABOUT</a></li>'
+'<li class="page_item page-item-228 current_page_item"><a href="http://www.blinderhidden.com/sitemap" title="SITEMAP">SITEMAP | BLINDER HIDDEN</a></li>'
+'<li class="cat-item cat-item-103"><a href="http://www.blinderhidden.com/category/css" title="CSS">CSS</a>'
+'<ul>'
+' ~省略~ '
+'<li class="cat-item cat-item-38"><a href="http://www.blinderhidden.com/category/smartphone/android" title="Android">Android</a>'
+'<ul>'
+'	<li class="post-item post-item-320"><a href="http://www.blinderhidden.com/mobile-mouse-lite-smartphone-wireless-android-app-320.html" title="Mobile Mouse Lite:スマホをワイヤレスマウスに出来るAndroidアプリ">Mobile Mouse Lite:スマホをワイヤレスマウスに出来るAndroidアプリ</a></li>'
+'	<li class="post-item post-item-215"><a href="http://www.blinderhidden.com/android-app-dev-movie-3gp-play-215.html" title="【Androidアプリ開発】動画(.3gpファイル)再生アプリ">【Androidアプリ開発】動画(.3gpファイル)再生アプリ</a></li>'
+'	<li class="post-item post-item-198"><a href="http://www.blinderhidden.com/vmware-android-smartphone-lg-samsung-198.html" title="VMware搭載のAndroidスマートフォン(LG、Samsung)">VMware搭載のAndroidスマートフォン(LG、Samsung)</a></li>'
+'</ul>'
+'</li>'
+'</ul>'
+'</li>'
+'</ul>';

		$("#idFukusuArea").html(str_work);
	});
});
</script>

複数行のhtmlコードを+で文字列連結してるだけです。

3.HTMLの記述例

<div id="idWrap">
	<h1>以下をクリックすると複数行のhtmlコードをJavaScriptで表示させます。</h1>
    <div id="idFukusuClk">ココをクリック</div>
    <br><br>
	<div id="idFukusuArea">
		<p>ココにJavaScripに記述の複数行のhtmlコードを表示します。</p>
	</div><!--/idLoadArea-->
</div>

複数行のhtmlコードをJavaScript記述内で分かり易くし、表示させるデモ

この方法の方が後から変更や追加があった際に
JavaScriptの記述を編集し易いですよね。