複数行のHTMLタグを分かり易くJavaScript記述し、ボタンクリックで表示させる方法 DAD UNION

複数行のHTMLタグを分かり易くJavaScriptで記述し、複数行のHTMLタグをボタンクリックで出力表示させる方法をご紹介します。
document.writeで複数行の文字列は改行や空白を除去し1行にして表示させてましたが、それだとJavaScript上の記述では読みづらいので複数行のものはなるべくそのまま記述出来ないかやってみました。

Contents

複数行のHTMLタグを分かり易くJavaScript記述し、ボタンクリックで表示させるCSSの記述
複数行のHTMLタグを分かり易くJavaScript記述し、ボタンクリックで表示させるJavaScriptの記述
複数行のHTMLタグを分かり易くJavaScript記述し、ボタンクリックで表示させるHTMLの記述
複数行のhtmlコードをJavaScript記述内で分かり易くし、表示させるデモページ

複数行のHTMLタグを分かり易くJavaScript記述し、ボタンクリックで表示させるCSSの記述

※ボタンエリア（#idFukusuClk）と出力表示エリア（#idFukusuArea）のCSS記述です。必要に応じて変更して下さい。

<style type="text/css">
<!--
body {
	margin: 0px;
	font-size:14px;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:1.4em;
	text-align:center;
	padding:15px 0;
}
#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>

複数行のHTMLタグを分かり易くJavaScript記述し、ボタンクリックで表示させるJavaScriptの記述

※jquery.min.jsファイルを読み込みます。変数（str_work）に出力させたい複数行のHTMLタグを「+」と「’」で文字列連結して代入してます。

<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>
&lt;/script&gt;

複数行のHTMLタグを分かり易くJavaScript記述し、ボタンクリックで表示させるHTMLの記述

※ボタンエリア（id=”idFukusuClk”）と出力表示エリア（id=”idFukusuArea”）を用意してます。必要に応じて変更して下さい。

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