JavaScriptで3番目の引用符が必要です

Question

JavaScriptを使用してHTMLを変更しています。したがって、forループで生成されるので、HTMLコードを保存するStringがあります。その中には<a>というタグがあります。 <a>タグには、onClickを追加します。これは、javascript変数に保存されたパラメータを持つ関数を呼び出します。

let parameter = "p1"; 
let to_html_String = "<a href='#' onClick='create_sprite_window("+parameter+")'></a>"; 
document.getElementById('sidebar_left_sprites').innerHTML = to_html_String; 

それは次のHTML prodeceしまうので、これは動作しません：なし引用符がP1の前と後がないので、それは動作しません

<a href='#' onClick='create_sprite_window(p1)'></a> 

を。 私の問題は、これを解決するために3番目の引用符が必要だということです。私はそれらの引用符を必要とするところ、私は＃を使用する次の例では ：

let parameter = "p1"; 
let to_html_String = "<a href='#' onClick='create_sprite_window(#"+parameter+"#)'></a>"; 
document.getElementById('sidebar_left_sprites').innerHTML = to_html_String; 

それはのonClickを終わるだろうし、それが終わるだろうbeacuse私はダブルを使用することはできませんので、私は単一引用符を使用することはできませんto_html_String。

3つ目の引用符がありますか、これを解決する別の方法がありますか？あなたはES6を使用している場合

Answer 1

に動作します、あなたはとにかく

let foo = `Hello "World's"`; 

ようtemplate stringsを使用することができます - なぜあなたは自分の引用符をエスケープはないでしょうか？

let bar = 'hello \' world'; 
let buz = "hello \" world"; 

Answer 2

これは

"<a href='#' onClick='create_sprite_window('"+parameter+"')></a>"; 

Answer 3

JavaScriptを使用してHTMLをビルドしないでください。 DOM APIを使用すると、ドキュメントノードをきれいに安全に構築でき、イベントリスナーをアタッチして、JavaScriptで構築しているHTMLにJavaScript文字列を作成する必要がなくなります。

let parameter = "p1"; 

const link = document.createElement('a'); 
link.href = '#'; 
link.textContent = 'maybe you want something in this link?'; 
link.addEventListener('click', function (e) { 
    e.preventDefault(); 
    create_sprite_window(parameter); 
}); 

document.getElementById('sidebar_left_sprites') 
    .appendChild(link); 

• createElement
• addEventListener
• appendChild

Answer 4

/*使用\」LETパラメータ= "P1" 機能、単一引用符*/

と区別するために、 let to_html_String = "";document.getElementById（ 'sidebar_left_sprites'）。innerHTML = to_html_String;