JavaScriptでのHTMLのエスケープ

Question

JavaScriptでHTMLを構築するときは、二重引用符を常にエスケープしています。例えば。

$(wrapper).append("<input type=\"text\" name=\"thingummy[" + id + "]\" data-id=\"" + data_id + "\" id=\"" + id + "_" + data_id + "\" /> <br>"); 

多くの引用符がある場合は、私は絶えず間違って引用符を逃してしまいました。そして私はそれらを修正したいよりも多くの時間を費やしてしまいます。

私が使っているアプローチよりも優れた（速く/安全で読みやすい）HTMLを構築する方法はありますか？私が言及するのを忘れてしまった

UPDATE

一つではなく重要なポイント！私はPHPを使ってこのJavaScriptを出力しています。だから、私はこのようなコードを持っている！彼らは私がの真ん中にいることを忘れたときに、私は続ける別の問題が発生しているPHPを壊してしまうことcosを単一引用符を使用して作る

echo '$(wrapper).append("<input type=\"text\" name=\"thingummy[" + id + "]\" data-id=\"" + data_id + "\" id=\"" + id + "_" + data_id + "\" /> <br>");'; 

は「（問題をマークいくつかのPHPと以下のコメントに記載されているように単一引用符を使用する）。

Answer 1

あなたが使用することができheredoc syntax：

<?php 
echo <<<JAVASCRIPT 
<script type="text/javascript"> 
alert("some javascript code where you don't have to escape double quotes"); 
</script> 
JAVASCRIPT; 

これは、あなたが仕事簡素化します。

それとも、あなたのPHPのタグを閉じて、このように、それを再度開くことができます。

<?php 
$somePhpCode = 1; 
?> 
<script type="text/javascript"> 
alert("some javascript code where you don't have to escape double quotes"); 
</script> 
<?php 
$somePhpCode = 2; 
?> 

Answer 2

JavaScriptでおそらくtemplating stringsを使用できます。 ${var}構文でも変数を文字列に挿入するのが簡単になります。このような

echo '$(wrapper).append(`<input type="text" name="thingummy[${id}]" data-id="${data_id}" id="${id}_${data_id}" /> <br>`);';