JavaScript에서 HTML 탈출하기

Question

JavaScript로 HTML을 만들 때 나는 계속 큰 따옴표를 사용하지 않고있다. 예 :

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

많은 인용 부호가있을 때, 나는 끊임없이 내가 탈출 한 인용 부호를 실수하고있다. 그리고 나는 그들을 고치기보다 더 많은 시간을 보냅니다.

내가 사용하고있는 접근 방식보다 HTML을 만드는 더 빠르고 (더 안전하고 읽기 쉬운) 방법이 있습니까?

업데이트

한 가지 중요한 점은 언급하는 것을 잊어 버렸습니다! PHP를 사용하여이 JavaScript를 출력합니다. 그래서, 나는 다음과 같은 코드가 있습니다!

작은 따옴표를 사용하게

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

은 '(문제를 표시 그들은 내가 중간에있어 잊지 때 발생한 유지하는 또 다른 문제입니다 PHP를 깨는 결국 왜냐하면 일부 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>`);';