この記述のjsをもっと簡潔にしたいです。

Question

$(".tokyo-chuoku").append("<tr><th><span>" + json["category"] + "</span><a href='detail.php?id=" + json["id"] + "'><h4>" + json["title"] + "</h4></a></th><td><span class='gmap_link'><a class='i_map' target='_blank' href='https://www.google.co.jp/maps/search/" + json["address"] + "'>" + json["address"] + "</a></span></td><td><span class='txt'>" + json["tel"] + "</span></td><td><span class='txt'>" + json["business_hours"] + "</span></td><td><span class='txt'>" + json["holiday"] + "</span></td></tr>");

appendにある記述を簡潔にしたいです。

理想例：

area = ("<tr><th><span>" + json["category"] + "</span><a href='detail.php?id=" + json["id"] + "'><h4>" + json["title"] + "</h4></a></th><td><span class='gmap_link'><a class='i_map' target='_blank' href='https://www.google.co.jp/maps/search/" + json["address"] + "'>" + json["address"] + "</a></span></td><td><span class='txt'>" + json["tel"] + "</span></td><td><span class='txt'>" + json["business_hours"] + "</span></td><td><span class='txt'>" + json["holiday"] + "</span></td></tr>");

$(".tokyo-chuoku").append(area);

$(".tokyo-shibuyaku").append(area);

Answer 1

求めているものから少し道はそれますが、append地獄だとタグ挿入などのメンテが大変なので
Handlebars.jsを使うと見やすく書けます。
…このままだと動かないかもですが…；

<script id="tmp01" type="text/x-handlebars-template">
  <tr>
    <th>
      <span>{{category}}</span>
      <a href='detail.php?id={{id}}'><h4>{{title}}</h4></a>
    </th>
    <td>
      <span class='gmap_link'><a class='i_map' target='_blank' href='https://www.google.co.jp/maps/search/{{address}}'>{{address}}</a></span>
    </td>
    <td><span class='txt'>{{tel}}</span></td>
    <td><span class='txt'>{{business_hours}}</span></td>
    <td><span class='txt'>{{holiday}}</span></td>
  </tr>
</script>

  var template = Handlebars.compile($("#tmp01").html());
  $("#tokyo-chuoku").append(template(json));
  $(".tokyo-shibuyaku").append(area);

Answer 2

プレースホルダを置いて後から置換するのはどうでしょう？

var json1={
  category:'カテゴリ名',
  id:'IDxxxx',
  title:'タイトル',
  address:'中央区XX町XXXX',
  tel:'XX-XXXX-XXXX',
  business_hours:'X:XX-X:XX',
  holiday:'休日'
}
var json2={
  category:'カテゴリ名',
  id:'IDxxxx',
  title:'タイトル',
  address:'渋谷区XX町XXXX',
  tel:'XX-XXXX-XXXX',
  business_hours:'X:XX-X:XX',
  holiday:'休日'
}
area = "<tr><th><span>{{category}}</span><a href='detail.php?id={{id}}'><h4>{{title}}</h4></a></th><td><span class='gmap_link'><a class='i_map' target='_blank' href='https://www.google.co.jp/maps/search/{{address}}'>{{address}}</a></span></td><td><span class='txt'>{{tel}}</span></td><td><span class='txt'>{{business_hours}}</span></td><td><span class='txt'>{{holiday}}</span></td></tr>";

function placeHolder(str, json){
  for ( var k in json ){
    str = str.replace('{{'+k+'}}',json[k]);
  };
  return str
}

$(".tokyo-chuoku").append(placeHolder(area,json1)); 

$(".tokyo-shibuyaku").append(placeHolder(area,json2));  

Answer 3

DOM生成用のヘルパーメソッドを作って、下記のような形で定義出来れば分かりやすいんじゃないかと。
ヘルパーメソッドは他の画面でも流用できますし。

// trタグ生成　※他のタグのメソッドは割愛します
var tr = function (attr, value) {
  return '<tr' + attr + '>' + value + '</tr>';
}

area = tr ('',
  th ('',
    span ('', json['category']),
    a (" href=detail.php?id="+json['id'], h4 (json['title']) )
  ),
  td ('',
    span (" class='gmap_link'",
      a (" class='i_map target='_blank'" +
         "href='https://www.google.co.jp/maps/search/'" + json['address'],
        json['address']
      )
    )
  ),
  td ('', span (" class='txt'", json['tel']) ),
  td ('', span (" class='txt'", json['business_hours']) ),
  td ('', span (" class='txt'", json['holiday']) )
);

$(".tokyo-chuoku").append(area);

Answer 4

個人的にはhtmlとjavascriptは分けて記述したほうがメンテナンスとかしやすくなると思います。
たぶんセレクトボックスとかにチェックしたときに表示させるような仕様なのかなと推測してしたのように作ってみました。
※ちょっと長かったので多少データ省略させてもらいました。
appendを使うのはajaxで程よく整形されたhtmlを返す前提でないと仕様変更時にjavascriptの文字列結合と格闘する羽目になると思います。
apiなどからjsonで帰ってくるデータを使うとするとattrやtextで予め用意しておいた非表示のhtmlに値をうまく入れるほうが個人的にはすっきりします（あくまでも好みの問題かもしれませんが）

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

<script>
	$(function(){

		//.areaInfoがクリックされたら
		$('.areaInfo').click(function(){

			//これはたぶんajaxでとりますか？
			var json = {category:'中央区',id:1,address:'cuouku'};

			//クリックされたdata-areaの値を変数areaに代入
			//この後出てくるareaは'chuoku'という文字列になる
			var area = $(this).attr('data-area');

			//この場合だと#chuoukuの子要素のa.detail_linkのhrefに「detail.php?id=1」が入る
			$('#' + area + ' a.detail_link').attr("href","detail.php?id=" + json["id"]);

			//この場合だと#chuoukuの子要素のh4.categoryに「中央区」が入る
			$('#' + area + ' h4.category').text(json["category"]);

			//この場合だと#chuoukuの子要素のh4.categoryのhref属性の値に
			//「https://www.google.co.jp/maps/search/cuouku」が入る
			var gmapUrl = "https://www.google.co.jp/maps/search/" + json["address"];
			$('#' + area + ' a.i_map').attr("href",gmapUrl);

			//aタグのなかに「cuouku」が入る
			$('#' + area + ' a.i_map').text(json["address"]);

			//非表示のtrを表示させる。ただtrをtableだったか。。
			//→とりあえず表示しますが、レイアウト上の問題があるかも
			$('#' + area).css("display","table");

		});//.areaInfoクリックで発生する処理終了
		
	});
	
</script>
	
<a href='javascript:;' data-area="chuoku" class="areaInfo">中央区のデータを表示</a>
<table>
	<tr id='chuoku' style="display:none">
		<th>
			<span class="category">
				<a href="" class="detail_link"><h4 class="category"></h4></a>
			</span>
		</th>
		<td>
			<span class='gmap_link'>
				<a class="i_map" target="_blank" href=""></a>
			</span>
		</td>
	</tr>
</table>

※ソースはデスクトップに保存すればそのまま動きますので挙動見ていただければ幸いです。

Answer 5

var htmlString = '';
var json = {
  id: 'id',
  title: 'title',
  category: 'category',
  address: 'address',
  tel: 'tel',
  business_hours: 'business_hours',
  holiday: 'holiday'
}

htmlString = htmlString.concat(
  '<tr>',
    '<th>',
      '<span>' + json['category'] + '</span>',
      '<a href="detail.php?id=' + json['id'] + '"',
      '<h4>' + json['title'] + '</h4>',
    '</th>',
    '<td>',
      '<span class="gmap_link">',
        '<a class="i_map" target="_blank" href="https://www.google.co.jp/maps/search/' + json['address'] + '">',
          json['address'],
        '</a>',
      '</span>',
    '</td>',
    '<td>',
      '<span class="txt">',
          json['tel'],
      '</span>',
    '</td>',
    '<td>',
      '<span class="txt">',
          json['business_hours'],
      '</span>',
    '</td>',
    '<td>',
      '<span class="txt">',
          json['holiday'],
      '</span>',
    '</td>',
  '</tr>'

);

$(function () {
  $element = $('.tokyo-chuoku');
  $element.html(unescape(htmlString));
});

詳しくは知らないため「これ」とおすすめできるものはありませんが、jQuery 以外の、AngularJS などのフレームワークの導入を検討されてはいかがでしょうか

Links

• 人気上昇中のJavaScriptライブラリを調べてみた［ジャンル別に比較］ - Build Insider
• jquery inserted HTML is rendered as a raw text - Stack Overflow

Answer 6

append祭りで（簡潔かどうかと言われると…）

$(".tokyo-chuoku").append(createTrData(json));

var url = "https://www.google.co.jp/maps/search/";
function createTrData(json){
	var ctd = function(value){
		return $('<td />').append($('<span />').addClass('txt').text(value));
	};
	return $('<tr />')
	.append($('<th />').append($('<span />').text(json["category"]))
		.append($('<a />').attr('href',"detail.php?id=" + json["id"] )
			.append($('<h4 />').text(json["title"]))))
	.append($('<td />').append($('<span />').addClass('gmap_link').append($('<a />')
		.addClass('i_map').attr('target','_blank').attr('href',url +json["address"])
		.text(json["address"]))))
	.append(ctd(json["tel"]))
	.append(ctd(json["business_hours"]))
	.append(ctd(json["holiday"]));
}

Answer 7

まぁ、可読性とメンテナンス性を考えると、普通はこうなるかなぁ…

var tr = "\

<tr>\ <th>\ <span>:category</span>\ <a href='detail.php?id=:id'>\ <h4>:title</h4>\ </a>\ </th>\ <td>\ <span class='gmap_link'>\ <a class='i_map' target='_blank' href='https://www.google.co.jp/maps/search/:address'>:address</a>\ </span>\ </td>\ <td><span class='txt'>:tel</span></td>\ <td><span class='txt'>:business_hours</span></td>\ <td><span class='txt'>:holiday</span></td>\ </tr>\ ";

var labels = ["category", "id", "title", "address", "tel", "business_hours", "holiday" ];

for(var i in labels)
{
var label = labels[i];
var val = json[label];
tr = tr.replace(new RegExp(':' + label), val);
}

$(".tokyo-chuoku").append($(tr));

Answer 8

function area(json_arg) {
  return "<span>" + json_arg["hoge"] + "</span>";
}

json = { "hoge" : "huga" };

$(".tokyo-chuoku").append(area(json)); 
$(".tokyo-shibuyaku").append(area(json));

Answer 9

この手の手法は大きく3種類で
0. テンプレートエンジンを使う
0. 文字列を配列に入れて [].join();
0. 表示上の変更される部分だけ更新する

このHTMLが絶対変更されないということでもない限り、テンプレートエンジンを使うべきだと思います。
そうでないならば、配列.join や 文字列.concat方法でいいんじゃないでしょうか。