Javascriptを使用した変数補間による複数行HTMLの出力方法

私は、関数が実行されるたびに、次の出力にしようとしている：Javascriptを使用した変数補間による複数行HTMLの出力方法

<object id="video" width="500" height="500" type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf"> 
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" /> 
<param name="allowfullscreen" value="true" /> 
<param name="flashvars" value='config={"playlist":["poster_location", {"url": "clip_location","autoPlay":false,"autoBuffering":true}]}' /> 
<img src="poster_location" width="500" height="500" alt="Poster Image" title="No video playback capabilities." /> 
</object>

と私は（ビデオ/ポスターなどを変更する）コードの特定の部分内のjavascriptの変数を補間したいと思います。

document.getElementByIdを使用して変更する必要がある各部分をターゲットにして、このように変更することができますが、さまざまな理由から、関数が実行されるたびに要素全体を削除して再構築する必要があります。

phpのエコーに似た方法でjavascriptを使ってhtmlを出力するには良い方法がありますか？

jQueryも役に立ちます。

出典

2010-12-01 Dewgong

最もホットなjQueryのアプローチは、現在jQuery Template pluginです。今、問題は、クライアント側でこの種のDOM操作を行うべきかどうかです。それはあなたが作ることができる決定だけです。しかし、それがあなたがする必要がある場合、テンプレートプラグインは便利です。詳細はJohn Resig's writeupを参照してください。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8" /> 
    <title></title> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
    <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js" type="text/javascript"></script> 
    <script id='summaryTmpl' type="text/x-jquery-tmpl"> 
      <li><h1>${Name}</h1> 
      <object id="video" width="500" height="500" type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf"> 
        <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" /> 
        <param name="allowfullscreen" value="true" /> 
        <param name="flashvars" value='config={"playlist":["${PosterLocation}", {"url": "${Location}","autoPlay":false,"autoBuffering":true}]}' /> 
        <img src="poster_location" width="500" height="500" alt="Poster Image" title="No video playback capabilities." /> 
      </object> 

    </script> 
    <script type="text/javascript"> 
      (function($){ 
      var movies = [ { 'Name':'die hard', 'Location':'http://someurl.com/vid.mpg', 'PosterLocation':'http://whereismymovieposter.net' }, { 'Name':'long kiss goodnight', 'Location':'http://whereisit.com'} ]; 
      $(function(){ 
         $("#summaryTmpl").tmpl(movies).appendTo("#moviesList"); 
       }); 
      })(jQuery); 
    </script> 
</head> 
<body> 
     <ul id="moviesList"></ul> 
</body> 
</html>

出典

2010-12-01 19:41:49 huntar

ありがとう、それをチェックアウト。私の場合にうまくいきます！ – Dewgong

あなたはそうのようなJavaScriptで複数行の文字列を使用することができます。

var str = "Blah blah blah \ 
    note the backslash that escapes the end of line";

別の方法としては、単純に文字列を閉じて、次の行にそれを再度開くことができます。

var str = "Blah blah blah " 
    +"and this way you don't get 'Empty Text Node' all over your DOM";

出典

2010-12-01 19:17:27

（V）のsprintfのjQueryがありますプラグインはこちら：http://plugins.jquery.com/project/printf

これはsprintf（）のような機能を提供します。あなたは、このような文字列、設定したい：custom今

custom = $.sprintf(code, myId, myWidth, myHeight, myDataURL);

...あなたのユニークなバージョンを生成するために、次に

code = '<object id="%s" width="%d" height="%d" type="application/x-shockwave-flash" data="%s">' 
//etc - yours is a bit long.

をそれに挿入された自分の価値観を持っています。「テンプレート」文字列に挿入するフィールドの数に応じて、非常にカスタマイズ可能にすることができます。コードが完了したら、文書に挿入します。

出典

2010-12-01 19:30:24

これは理想的ですが、私はKolinkのソリューションと比べてどれほど遅くなっているのでしょうか？ – Dewgong

Javascriptを使用した変数補間による複数行HTMLの出力方法

答えて

関連する問題