jQueryでhtml出力する際の効率のよい書き方について

Question

いつもお世話になっております。

前提・実現したいこと

現状の無駄に長いコードを短縮（綺麗に）したいです。

発生している問題・エラーメッセージ

jQuery.each(results, function() {
          html += '<div>';
          html += '<p>' + this.name + '</p>';
          html += '<div>';
          html += '<div>';
          // html += '<img src="/images/' + this.image + '.png" alt="' + this.name + '"></a>';
          html += '</div>';
          html += '<div>';
          html += '<table>';
          html += '<tr>';
          html += '<td rowspan="2">タイプ</td>';
          html += '<td>タイプ１</td>';
          html += '<td>' + this.type + '</td>';
・・・
        });

現状このようにresultsにきた結果の個数文だけhtmlを出力しているのですが、
上記のものはかなり省力したもので実際はもっと長いです…。

試したこと

もともとのhtmlを見直したり、タグを１つのhtml += にまとめたりしてみたのですが、
どうしてもhtmlを減らすには限界がありタグをまとめてもみにくいため何かよい方法があればご教示お願いしたいと思っております。

よろしくお願いします。

Answer 1

ES6にはヒアドキュメントにあたるテンプレートストリングスが実装されています

const fuga="xxx";
const html=`
hoge
${fuga}
piyo
`;
console.log(html);

Comments

[MeB]

ご回答ありがとうございます。
こちらの方法まだ把握しきれていないのですが、勉強してみます。
先に回答してくださった方をベストアンサーとさせていただきます。すみません。

[yambejp]

> 先に回答してくださった方をベストアンサー

いや、私もDOM派なので、mts10806さんの回答が正しいと思いますよ
私はあくまで改行を含む文字列を一気に書く方法もありますよ
という程度の回答にすぎません

Answer 2

jQueryによるDOM要素の生成

例えば：

<main></main>

$(function(){
    var html = $("<div></div>",{
        append:$("<table></table>",{
            append:$("<tr><td>table td</td></tr>"),
            addClass:'table',
        }),
        'id':'container',
    });
    $("main").append(html);
});

構造が決まっていれば上記のように一気につないでも良いし、
個々に変数に入れて必要に応じてappendするも良し。
あとは発想と工夫次第。（効率アップには発想と工夫が不可欠です。それは教えられてどうにかならない部分が多い領域です）

Comments

[MeB]

ご回答ありがとうございます。
長くなると読みにくくなりそうですけど（自分が）
このような便利な方法があるのですね。いつもありがとうございます。

[m.ts10806]

そこが発想と工夫です。
+=の羅列よりは役割が明確になっていて、より構造的な書き方になると思いますよ。メンテナンス性の観点からも良くなります。
何より質問者さんのコードはjQueryでもJavaScriptでもなく、ただ単に文字列を連結しているだけです。
素のJavaScriptであってもcreateElement()などを使うべきです。

[MeB]

ありがとうございます。
こちらの方法で書いてみます！
発想と工夫…頑張ります。