ajaxで読み込んだ情報をhtmlに追加する時の効率の良い方法は？

フォームに入力した値を、Ajax経由でDB登録した後、JSONの戻り値をappendしてリストに追加表示しています。
取得や表示は問題ありませが、リストの中身が1行の単純な構造ではないため、javascriptでappendする場合の記述が非常に見づらくなります。
現在は、該当ソースコードのhtml部分をappendのカッコの中に入れているイメージです。
初期表示のときと追加のときとで同じソースを記述する必要がありますが、さらに複雑な構造になると一部を変更するのも大変になってきます。

appendの中身とhtml部分を共通化したり等もっとわかりやすくする方法はありますでしょうか？

※LAMP環境で、Laravel 5.5で開発しています。

該当のソースコード

html
1<a class="list-group-item" href="#">
2  <div class="row">
3    <div class="col-sm-1"><i class="fas fa-edit"></i></div>
4    <div class="col-sm-10 parent" data-id="{{$category->id}}" data-name="{{$category->name}}">{{$category->name}}</div>
5    <div class="col-sm-1"><i class="fa fa-bars sortable-handle"></i></div>
6  </div>
7</a>

javascript
1$('<a class="list-group-item" href="#"><div class="row"><div class="col-sm-1"><i class="fas fa-edit"></i></div><div class="col-sm-10 parent" data-id="'+result["data"]["id"]+'" data-name="'+result["data"]["name"]+'">'+result["data"]["name"]+'</div><div class="col-sm-1"><i class="fa fa-bars sortable-handle"></i></div></div></a>').appendTo("#parent");
2

m.ts10806

2018/04/03 07:01

このjavascriptのコードではエラーとなるように思います。（変数の部分など特に）

n.Taro

2018/04/03 07:06

すみませ。修正しました

行動規範の内容に同意します

回答1件

ベストアンサー

何を求めているのかがよく判りませんでしたが, テンプレートリテラルを使えば良いのではないでしょうか？

以下ではカテゴリIDとカテゴリ名を受け取る関数getNodeを定義し, それをHTML部とスクリプト部の両方から参照するようにしています.

NOTE:動かしていないので, コーディングミスがあるかもしれません.

JavaScript
1function getNode(categoryId, categoryName){
2  return `
3<a class="list-group-item" href="#">
4  <div class="row">
5    <div class="col-sm-1"><i class="fas fa-edit"></i></div>
6    <div class="col-sm-10 parent" data-id="${categoryId}" data-name="${categoryName}">${categoryName}</div>
7    <div class="col-sm-1"><i class="fa fa-bars sortable-handle"></i></div>
8  </div>
9</a>`;
10}
11
12$(getNode(result["data"]["id"], result["data"]["name"])).appendTo("#parent");

PHP
1<script data-category-id="{{$category->id}}" data-category-name="{{$category->name}}">
2"use strict";
3{
4  const script = document.currentScript;
5  script.insertAdjacentHTML(
6    "afterend", 
7    getNode(script.dataset.categoryId, script.dataset.categoryName)
8  );
9  script.remove();
10}
11</script>