Javascript動的文字列を構築

Question

各データのように動的文字列を作成する必要があります。この文字列は、イベントclickが関数を呼び出すときにHTMLボタンを設定します。私は 'e'に問題があります。以下の例を参照してください：

var stringButton = ""; 
var txtBtn = "My Button"; 
for(item in data){ 
    stringButton= "<input id='btn-" + item.id + "' type='button' href='#' 
class='fbbutton'" + "value=' " + txtBtn + "' onclick='actionBtn(" + item .id + ", '" + 
item .name + "')'>"; 
} 

function actionBtn(id, name) { 
//process data. 
} 

では、私が見るの要素を調べる：

<input id="btn-1599" type="button" href="#" class="fbbutton" value=" My Button " 
onclick="actionBtn(1599, " itemName"" jjjj')'=""> 

問題はパラメータの文字列を渡すメソッドを呼び出す文字列を作成することです。 、我々が見ることができるように」と「間違っている。正しい方法は何ですか？

Answer 1

DOMインスペクターはあなたのDOMを示しています。それはあなたに生の情報源を示すものではありません。 「どんな種類の引用符が使用されたか」、「属性の順序」、「属性間のスペース文字数」などは保持されません。

ここでは、すべての属性が二重引用符で囲まれていますが、二重引用符も含まれています。しかし、値の中にある文字列は文字列の一部として色分けされています（通常は青で表示されます）。

あなたのソースでは、属性値を囲む一重引用符とその内部の一重引用符を使用しています。どちらか一方の代わりに二重引用符（ここでは\"としてエスケープされます）または"エンティティを使用することを検討してください。

最後に、スタックオーバーフローを歓迎します。新しい質問をする前に、以前の質問に回答してください。

Answer 2

正しい方法は、IMO DOMの作成方法を使用して、代わりにインラインのイベントハンドラを使用しての適切イベントハンドラをバインドすることである。

var button = document.createElement('input'); 
button.id = item.id; 
button.type = "button"; 
button.className = "fbbutton"; 
button.value = txtBtn; 
button.onclick = (function(item) { 
    return function() { 
     actionBtn(item.id, item.name); 
    }; 
}(item)); 

Answer 3

あなたのitem.nameには確かに 'or a'があるので、あなたが作成している文字列をカットします。

ジャバスクリプトテンプレート/マイクロテンプレートを使用し、

Answer 4

どちらかあなたはこの多くをやっている場合は、フェリックスKlingsの答えのように行うか、それらをエスケープしてみます。それはパーサによって処理された後

https://developer.mozilla.org/en/JavaScript_templates