質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.52%

  • JavaScript

    16499questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    9013questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    6731questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

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

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 230

MeB

score 87

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

 前提・実現したいこと

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

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

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>タイプ1</td>';
          html += '<td>' + this.type + '</td>';
・・・
        });


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

 試したこと

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

よろしくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+6

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/26 11:26

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

    キャンセル

  • 2018/07/26 12:06

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

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

    キャンセル

checkベストアンサー

+4

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するも良し。
あとは発想と工夫次第。(効率アップには発想と工夫が不可欠です。それは教えられてどうにかならない部分が多い領域です)

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/26 11:28

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

    キャンセル

  • 2018/07/26 11:33

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

    キャンセル

  • 2018/07/26 11:44

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 解決済

    jQueryで複数条件の絞込み検索

    jQueryを使って絞込み検索を作りたいです。 下記コードでor検索はできるようになりました。 全てをor検索ではなく、各hoge-1、hoge-2はor検索、hoge-1とh

  • 受付中

    ページトップにスクロールできません

    実装したい内容・問題点 ・jQueryを用いてページの一番上までスクロールするボタンを作成したい ・https://syncer.jp/jquery-to-top-buttonやh

  • 解決済

    jQueryの要素指定について

    前提・実現したいこと jQueryでstyle="width"を持っている要素を指定したい(複数の属性があっても「width」があれば指定する)のですが、この記述だとstyle="

  • 解決済

    JQueryのeach内部でsetTimeoutがうまく動作しない

    pathというクラスをeachで回し、1秒間隔でfill_blackというクラスを付与したいのですが、 下記コードでは思うように動作しません。 JSエラーなどはありませんが、一度に

  • 解決済

    jQueryの絞り込み検索(3つの条件 or検索)について

     前提・実現したいこと 画像を3つの条件(or検索)で表示したいと思っています。 2つの条件検索(#styleと#color)では問題なかったコードに、1つ条件(#size)を

  • 解決済

    jQueryで配列のソートをしたい

     前提・実現したいこと jQueryで配列のソート機能を実現したい 配列に入ったそれぞれの値を下記のように昇順にソートしたいです。 「1」「2」「3」 ↓ 「3」「2」「1

  • 解決済

    jsで下線が追尾するメニューで下線を元の場所に戻すには?

     前提・実現したいこと jsで下線がスライドして追尾するメニューを作りました 追加機能としてマウスのホバーが外れた時にカレントのある場所に下線を戻すようにしたいのですが どうすれば

  • 解決済

    Jquery1.11で最も近い次の要素をセレクトする方法

    規則性なく多重にネストされたタグの中にclass="target"があるとして そこから最も近い次のclass="target"要素をセレクトする方法をご存知の方お教えくださいませ

同じタグがついた質問を見る

  • JavaScript

    16499questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    9013questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    6731questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。