複数の行にHTMLを広げるjavascript

Question

私のjavascript関数には、以下のhtmlコードを入れたいと思います。私はお互いの隣に置いてはいけません。どのようにhtmlにあるのと同じ方法でコードに可能ですか？ コード：更新

<div data-role="page" data-add-back-btn="true" id="Gallery2" class="gallery-page"> 

     <div data-role="header"> 
      <h1>Second Gallery</h1> 
     </div> 

     <div data-role="content"> 

      <ul class="gallery"> 

       <li><a href="images/full/010.jpg" rel="external"><img src="images/thumb/010.jpg" alt="Image 010" /></a></li> 
       <li><a href="images/full/011.jpg" rel="external"><img src="images/thumb/011.jpg" alt="Image 011" /></a></li> 
       <li><a href="images/full/012.jpg" rel="external"><img src="images/thumb/012.jpg" alt="Image 012" /></a></li> 
       <li><a href="images/full/013.jpg" rel="external"><img src="images/thumb/013.jpg" alt="Image 013" /></a></li> 
       <li><a href="images/full/014.jpg" rel="external"><img src="images/thumb/014.jpg" alt="Image 014" /></a></li> 
       <li><a href="images/full/015.jpg" rel="external"><img src="images/thumb/015.jpg" alt="Image 015" /></a></li> 
       <li><a href="images/full/016.jpg" rel="external"><img src="images/thumb/016.jpg" alt="Image 016" /></a></li> 
       <li><a href="images/full/017.jpg" rel="external"><img src="images/thumb/017.jpg" alt="Image 017" /></a></li> 
       <li><a href="images/full/018.jpg" rel="external"><img src="images/thumb/018.jpg" alt="Image 018" /></a></li> 

      </ul> 

     </div> 

     <div data-role="footer"> 
      <h4>&copy; 2011 Code Computerlove</h4> 
     </div> 

    </div> 

Answer 1

は、Javascriptが行の最後の文字としてバックスラッシュ（\）を追加することにより、マルチラインをサポートしていないように、それは勝ったので、あなたも、その背後にスペースバーを持つことができないようです改行をキャンセルしないでください。

var str = '<div data-role="page" data-add-back-btn="true" id="Gallery2" class="gallery-page"> \ 
    <div data-role="header"> \ 
     <h1>Second Gallery</h1> \ 
    </div> \ 
    <div data-role="content"> \ 
     <ul class="gallery"> \ 
      <li><a href="images/full/010.jpg" rel="external"><img src="images/thumb/010.jpg" alt="Image 010" /></a></li> \ 
      <li><a href="images/full/011.jpg" rel="external"><img src="images/thumb/011.jpg" alt="Image 011" /></a></li> \ 
      <li><a href="images/full/012.jpg" rel="external"><img src="images/thumb/012.jpg" alt="Image 012" /></a></li> \ 
      <li><a href="images/full/013.jpg" rel="external"><img src="images/thumb/013.jpg" alt="Image 013" /></a></li> \ 
      <li><a href="images/full/014.jpg" rel="external"><img src="images/thumb/014.jpg" alt="Image 014" /></a></li> \ 
      <li><a href="images/full/015.jpg" rel="external"><img src="images/thumb/015.jpg" alt="Image 015" /></a></li> \ 
      <li><a href="images/full/016.jpg" rel="external"><img src="images/thumb/016.jpg" alt="Image 016" /></a></li> \ 
      <li><a href="images/full/017.jpg" rel="external"><img src="images/thumb/017.jpg" alt="Image 017" /></a></li> \ 
      <li><a href="images/full/018.jpg" rel="external"><img src="images/thumb/018.jpg" alt="Image 018" /></a></li> \ 
     </ul> \ 
    </div> \ 
    <div data-role="footer"> \ 
     <h4>&copy; 2011 Code Computerlove</h4> \ 
    </div> \ 
</div>'; 

またはHTMLテンプレートを使用して（jQueryのを使用して）DIVにロード

$("#div").load("/html_template.html"); 

Answer 2

あなたは一種のこの行うことができます。

var myHtml = [ 
'firstline', 
'second line', 
'third line'].join("\n"); 

ので、かなりあなたはまだ必要性をいくつかのコードを分解してください。

代替案（コードが大きくなる場合）は、HTMLファイルに保存し、必要なときにすぐに$.getで取得し、おそらく変数のどこかにキャッシュします。

$.get('snippet.html', function(data) { 
    $('.result').html(data); 
}); 

このスニペットを変更すると、はるかに簡単になるので、これは実際にはかなり良いアイデアだと思います。

Answer 3

javascriptからHTMLを生成すると、ロジックとプレゼンテーションが直接結びつきます。それはあなたのコードをガーベールします。

ロジックとプレゼンテーションの明確な分離を得るには、pureのようなJavaScriptテンプレートエンジンを使用できます。

Answer 4

本当に古い質問ですが、この構文がたくさんあるわけではありませんので、ここではこれを残しておきます。 htmlファイルからこれを生成するためのシンプルなシェルコマンドで

var html = '' + 
    ' <div data-role="page" data-add-back-btn="true" id="Gallery2" class="gallery-page">' + 
    '' + 
    '  <div data-role="header">' + 
    '   <h1>Second Gallery</h1>' + 
    '  </div>' + 
    '' + 
    '  <div data-role="content"> ' + 
    '' + 
    '   <ul class="gallery">' + 
    '' + 
    '    <li><a href="images/full/010.jpg" rel="external"><img src="images/thumb/010.jpg" alt="Image 010" /></a></li>' + 
    '    <li><a href="images/full/011.jpg" rel="external"><img src="images/thumb/011.jpg" alt="Image 011" /></a></li>' + 
    '    <li><a href="images/full/012.jpg" rel="external"><img src="images/thumb/012.jpg" alt="Image 012" /></a></li>' + 
    '    <li><a href="images/full/013.jpg" rel="external"><img src="images/thumb/013.jpg" alt="Image 013" /></a></li>' + 
    '    <li><a href="images/full/014.jpg" rel="external"><img src="images/thumb/014.jpg" alt="Image 014" /></a></li>' + 
    '    <li><a href="images/full/015.jpg" rel="external"><img src="images/thumb/015.jpg" alt="Image 015" /></a></li>' + 
    '    <li><a href="images/full/016.jpg" rel="external"><img src="images/thumb/016.jpg" alt="Image 016" /></a></li>' + 
    '    <li><a href="images/full/017.jpg" rel="external"><img src="images/thumb/017.jpg" alt="Image 017" /></a></li>' + 
    '    <li><a href="images/full/018.jpg" rel="external"><img src="images/thumb/018.jpg" alt="Image 018" /></a></li>' + 
    '' + 
    '   </ul>' + 
    '' + 
    '  </div>' + 
    '' + 
    '  <div data-role="footer">' + 
    '   <h4>&copy; 2011 Code Computerlove</h4>' + 
    '  </div>' + 
    '' + 
    ' </div>'; 

：\ JavaScriptを使用して

cat myfile.html | sed "s/'/\\'/g" | sed "$ ! s/^.*$/'\0' +/g" | sed "$ s/^.*$/'\0';/"