複数行の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="https://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="https://dad-union.com" title="DAD UNION">DAD UNION</a></li>'
+'<li class="page_item page-item-2"><a href="https://dad-union.com/about">このサイトについて</a></li>'
+'<li class="page_item page-item-246 current_page_item"><a href="https://dad-union.com/sitemap" aria-current="page">サイトマップ</a></li>'
+'<li class="cat-item cat-item-36"><a href="https://dad-union.com/category/css" title="css">css</a></li>'
+'<li class="cat-item cat-item-2"><a href="https://dad-union.com/category/javascript" title="JavaScript">JavaScript</a></li>'
+'<li class="cat-item cat-item-3"><a href="https://dad-union.com/category/jquery" title="jQuery">jQuery</a></li>'
+'<li class="cat-item cat-item-53"><a href="https://dad-union.com/category/php" title="PHP">PHP</a></li>'
+'<ul>';

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

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

3．HTMLの記述例

<div id="idWrap">

<h1>以下をクリックすると複数行のhtmlコードをJavaScriptで表示させます。</h1>


<div id="idFukusuClk">ココをクリック</div>

    


<div id="idFukusuArea">
		
ココにサイトマップの情報を取得表示します。
</div>
<!--/idLoadArea-->
</div>

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

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