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

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

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>