複数行のHTMLタグを分かり易くJavaScriptで記述し、複数行のHTMLタグをボタンクリックで出力表示させる方法をご紹介します。
document.writeで複数行の文字列は改行や空白を除去し1行にして表示させてましたが、それだとJavaScript上の記述では読みづらいので、複数行のHTMLタグはなるべくそのまま記述出来ないかやってみました。
Contents
ディスプレイ広告
複数行の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>
複数行の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>
複数行のhtmlコードをJavaScript記述内で分かり易くし、表示させるデモページ
複数行のhtmlコードをJavaScript記述内で分かり易くし、表示させるデモ
この方法の方が後から変更や追加があった際にJavaScriptの記述が見やすく編集し易いですよね。
※流用される場合は自己責任でお願いします。
デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。