要素を作成してテキストを周囲に追加するより良い方法はありますか？

Question

私は現在のように見えるラインの束を持っている：

txt = "Can't print the value for <span class='keyword'>"+arguments[1]+"</span> before it's set"; 

私は、これはひどい見て、私は、引数内の任意のHTMLをエスケープする必要が

$('#mydiv').append($('<div/>').html(txt)); 

をやっている[1]

私が考えることのできる唯一の選択肢は、すべてのテキストがそれ自身の要素内にあることを確認することです。

var spans = []; 
spans[0] = $('<span/>').text("Can't print the value for "); 
spans[1] = $('<span/>').text(arguments[1]).className('keyword'); 
spans[2] = $('<span/>').text(" before it's set"); 
$('#mydiv').append($('<div/>').append(spans[0],spans[1],spans[2])); 

これは単なるテキスト行ではかなりのものです。私にできることはほかにありますか？

編集：これはテンプレートエンジンによって処理されるべきものではありません。これは、javascriptのロギング機能によって生成されたHTMLです。

Answer 1

一貫した書式の場合は、通常の文字列として追加してキーワード部分を検索します。

$('<div/>') 
    .appendTo('#mydiv') 
    .html("Can't print the value for <span class='keyword'></span> before it's set") 
    .find('.keyword').text(arguments[1]); 

Answer 2

JSを使用してたくさんのHTMLを作成し続ける場合は、テンプレートライブラリを使用することをおすすめします。私は最近の改宗者です、それを理解するまでには長い時間がかかりました。しかし、多くの成功したサイト（twitter、github、etc.）と偉大なJohn Resig promoteを見て、そして/またはテンプレートを頻繁に使用すると、私は理解しようと努力してうれしいです。今私はそれを得る。それは懸念を分離し、論理から見解を外すためのものです。

私は非常に素人のテンプレートテンプレートライブラリhttp://blueimp.github.com/JavaScript-Templates/を使用していますが、underscore.jsとmustache.jsで提供されているテンプレートがより一般的です。

私が使用しているライブラリの利点は、実際には小さく、< 1kbであり、基本的にはそれらに精通しているPHP/ASPコードを書くのが好きです。

あなたは脱出することなく、<script>タグ内にHTMLを書くことができます：あなたの変数を使用して

、txt、構文は次のようになります//コードレビュー：

<script> 
    var data={txt : "Can't print the value for <span class='keyword'>"+arguments[1]+"</span> before it's set"}; 

    <div>{%=o.txt%}</div> 
</script>