자바스크립트 동적엘리먼트 따옴표 사용하기

자바스크립트에서 동적엘리먼트를 사용할때 ECMA2015 이후로 백틱이라 불리우는 템플릿 리터럴을 사용해서 기존의 어려움을 많이 해결했습니다.

 

그런데 ECMA2015의 내용이 적용이 안되는 브라우저가 있는데 그것이 바로 인터넷 익스플로러입니다.

서비스 조건을 크롬, 파이어폭스 등 크로니움 기반의 브라우저로 한정지을 것이 아니라면 인터넷 익스플로러를 버리지 못하는 경우가 발생합니다.

 

이때 자바스크립트 동적엘리먼트를 구현하려면 어쩔 수 없이 따옴표 또는 홑따옴표를 사용해야 되는데요.

사이에 함수가 있고, 거기에 매개변수까지 있으면 헬게이트가 오픈이 됩니다.

함수에 매개변수까지 존재하는 경우 escape라고 하는 \ 까지 사용을 해서 해결이 가능합니다.

이와 관련된 해결 방법에 대해서 알아보겠습니다.

자바스크립트 동적엘리먼트 기본

 

자바스크립트에서 HTML을 동적으로 만들어낼때 양쪽에 따옴표만 넣는 경우가 가장 간단한 것입니다.

var de += "<button>조회</button>"

 

하지만 button 안에 클래스 또는 type 같은 것이 들어갈때는 따옴표를 홑따옴표와 섞어서 사용해야 합니다.

따옴표를 먼저쓸지 홑따옴표를 먼저쓸지는 본인의 취향입니다.

 

var de += "<button class='mybutton'>조회</button>"
var de += '<button class="mybutton">조회</button>'

 

자바스크립트 동적엘리먼트 따옴표 혼합 사용

 

함수내 매개변수가 포함된 경우라고 할 수 있습니다.

 

var de +="<button class='mybutton' onclick='myfunction(\""+action+"\")' >조회</button>"

 

\는 이스케이프라고 불리우는 것으로, 이스케이프 다음에 나오는 따옴표는 무시해라라고 해석하면 됩니다.

위 경우는 함수 안에 인자가 string이기 때문에 홑 따옴표(또는 따옴표)로 감싸야합니다.

그리고 함수를 감싸고 있는 것이 홑따옴표이므로, 내부는 따옴표를 넣어야 합니다.

 

그런데 따옴표가 연속되므로 이스케이프가 없다면, 그냥 중간에 따옴표가 생긴것이 됩니다.

매개변수를 감싸는 따옴표가 필요하므로 브라우저가 해석할때 html과 자바스크립트 변수 사이의 연결을 위해 따옴표로 사용하되, 매개변수를 감싸는 따옴표는 살리기 위해, 이스케이프를 넣어서 다음에 나오는 따옴표를 무시하라고 명령하기 위해서 이스케이프를 넣었습니다. (action은 변수명입니다.)

 

내용이 많이 복잡한가요? 처음에는 이해가 안되지만 곰곰히 생각하다보니 느낌이 옵니다.

 

php 에서 동적 엘리먼트 따옴표 사용하기

 

var de += "<button class='mybutton' onclick='myfunction(\""+action+"\",\"<?=$myvariable?>\")'>조회</button>"

 

동적 엘리먼트를 만들때, 중간에 php 코드가 들어간 경우 혼동이 됩니다.

html과 자바스크립트 변수 사이에는 +로 연결을 해줬는데, 함수의 매개변수로 php 변수를 사용할때는 어떻게 해야 할까요?

 

먼저 지금 사용될 변수가 php 변수라는 것을 알려주기 위해 변수를 <?= ?>로 감싸줘야 합니다.

그리고 난 다음에 +는 사용할 필요가 없습니다.

 

글마무리

 

이렇게보면 정말 ECMA2015가 얼마나 혁명적인가를 몸소 체험할 수 있었는데요.

ms에서 인터넷 익스플로러에 대해서도 이 부분을 적용할 수 있게 해주면 참 좋겠다 생각이 들었습니다.

물론 방법이 없는 것은 아닙니다.

BABEL을 이용해서 개발을 하면, 알아서 이 부분을 처리해준다고 합니다.

 

2021.03.23 - [프로그래밍] - IE에서 템플릿 리터럴이 보이지 않음

IE에서 템플릿 리터럴이 보이지 않음