[Javascript] HTML 태그 생성 방법.

 

HTML 태그를 동적으로 생성해야하는 일은 자주 발생한다.

일반적으로 태그를 열고 닫고, 아이디를 추가하고 클래스를 추가하고 속성들을 추가하고....

아래 코드처럼 사용하는게 대다수일 것이다.

var test = "<div id='divTest' style='display:none' class='no'>test</div>"

그리고 여기서 다른 태그를 추가한다면, 문자열을 합치는 +를 사용하여 합치는 경우가 많다

test += "<div style='display:block' class='yes'>보인다.</div>"
test += "<div style='display:block' class='yes'>보인다1.</div>"
test += "<div style='display:block' class='yes'>보인다2.</div>"
test += "<div style='display:block' class='yes'>보인다3.</div>"

이런 코드를 뭐 한줄 두줄만 사용한다고 하면, 헷갈릴 이유가 전혀없다.

하지만 이런 코드들은 내가 태그를 생성하고 닫았는지, 정확하게 설정했는지 확인할 수가 없다.

 

그래서 나는 이전 회사를 다니면서는 HTML 태그를 생성할 때, 아래와 같은 코드를 많이 사용하였다.

$(document.createElement("div")).attr("id", "divText");

div HTML 태그를 생성하고, 아이디라는 속성에 divText라는 값을 설정해주었다.

그래서 이전 회사 js 코드에서는 document.createElement라는게 너무 많았다.

 

나도 이제 나름 고년차 개발자를 향해 달려가고 있는데, 계속 똑같은 코드를 써야되나라는 생각이 많이 들어

중복을 줄이자. 중복을 줄이자라는 생각이 많아서 이것 저것 찾아본 결과.

$("<div>")

document.createElement("div") 라는 것을 <div>한방에 처리 가능하다는 것을 깨닮았다.

 

제발 js에서 HTML 태그를 생성할 경우, 문자열을 사용하여 태그를 생성하지말고 마지막에 소개한 방법으로 HTML태그를 생성해서 사용해보자.

태그를 열고 닫는 것에 대한 스트레스가 한결 줄어들 것으로 예상된다.