jQueryの\ n改行でテキストを設定する

Question

jQueryに次のものを追加します。

game_details_container.append('<div class="game_detail_peg"><table><tr><th class="game_detail_tr"><span class="game_detail_tr_round">'+innings_num+'</span> '+team_home+'</th> </tr><tr><td>'+inningsInfo['innings_pp_h']+'</td></tr></table></div>'); 

可変inningsInfo [ 'innings_pp_h']は改行 '\ n' はトークンを含むテキストを有しています。

ただし、テキストが流れて改行を尊重しないように設定されています。これを修正する方法はありますか？

誰でも私にこれを修正する方法について正しい方向でポイントを与えることができますか？

Answer 1

あなたがレンダリングされたHTMLで改行を作成するために、あなたの\n文字のためである何をしたい場合は、試すことができます：彼らは<pre>タグの内側にある場合を除き

game_details_container.append('<div class="game_detail_peg"><table><tr><th class="game_detail_tr"><span class="game_detail_tr_round">' 
    + innings_num 
    + '</span> ' 
    + team_home 
    + '</th> </tr><tr><td>' 
    + inningsInfo['innings_pp_h'].split("\n").join("<br />") 
    + '</td></tr></table></div>' 
); 

HTMLは、改行文字を無視します。改行を強制するには、<br>,<div>（または他のブロックレベルの要素）を使用するか、コンテンツを<pre>タグの内側に配置する必要があります。あなたのようなものと同じ結果を達成するためのマークアップを使用する必要があるので、HTMLの

Answer 2

レンダリングは、改行や空白文字繰り返しを無視：

inningsInfo['innings_pp_h'].replace(/\n/g, '<br/>') 

Answer 3

は、文字列を連結混乱です。代わりにテンプレートを使用してください。

var TEMPLATE = '<div class="game_detail_peg"><table><tr><th class="game_detail_tr"><span class="game_detail_tr_round">{{INNINGS_NUM}}</span>{{TEAM_HOME}}</th> </tr><tr><td>{{INNINGSINFO}}</td></tr></table></div>'; 

var renderedHtml = TEMPLATE.replace(/{{INNINGS_NUM}}/, innings_num) 
          .replace(/{{TEAM_HOME}}/, team_home) 
          .replace(/{{INNINGSINFO}}/, inningsInfo['innings_pp_h'].replace(/\n/g, '<br/>')); 

game_details_container.append(renderedHtml); 

非常に緻密で分かりやすい。