js 유효성? 뭔지모를 문제점과 해결책

예전에 비트할때에도 웹 jsp의 이상한 구조로 인해 고통받았었는데,
(페이지 로딩 전과 후의 문제로 인해 함수의 작동 유무 따위의)

다시 그 고통속에서 해엄치고 있습니다.

우선, js 뿐만 아니라 다른곳에서도 비슷한 일이 있던걸로 아는데, 다시한번 나타난 문제로,
var text = '<span id="testspan" onclick="Foo()"'>hello</>';
의 경우입니다.
innerHTML 혹은 append 따위를 이용하기 위해 만든 변수인데, 작동상에 문제가 없습니다.

하지만, Foo함수 안에 파라메터를 입력할때에 문제가 발생했습니다.

ajax통신,
success(value):
  var text = '<span id="testspan" onclick="Foo( ? )"'>hello</>';
  document.getElementByid('testDiv').innerHTML=text;

function Foo(value){
 console.log(value);
}
에서 ? 의 케이스 입니다.
처음 생각했을 때에는
var text = '<span id="testspan" onclick="Foo('+value+')"'>hello</>';
로 생각을 했었으며, 결과적으로
value function은 선언되지 않았따는 오류를 띄웠습니다.

 var text = '<span id="testspan" onclick="Foo("'+value+'")"'>hello</>';
를 시도했을떄는 위치를 알 수 없는 신텍스 에러가 났습니다.

문제점은 double quota 였습니다. onclick 시 이미 쌍따움표를 이용해 들어갔는데, 내부에서 다시 쌍따움표로 막혔기 때문에, 이후 모든 syntax들이 꼬이게 되었습니다.

Foo함수 내부의 parameter에서 double quota 를 읽지 않게 하면 됩니다.

이를 예전에 유효성 관련 과제로 처리하는게 있었는데.. 아무튼
js의 케이스에서  " 를 무시시키는 것은 간단히 \ 를 쓰는것으로 해결되었습니다.
 var text = '<span id="testspan" onclick="Foo(\"'+value+'\")"'>hello</>';
보고 속이 울렁거리는걸 꾹 참고 정독해 보면, double quota 가 필요하나, 읽지 않아야 할 부분 앞에는 \ 가 붙어있음을 볼 수 있습니다.