2020-01-10 내용추가)
- 해당 글에 대한 내용을 추가합니다.
innerHTML과 append() 메소드의 원천적인 동작 비교를 잘 못한거 같습니다.
jQuery와 dom의 동작을 비교하려고 썻던 포스팅인데 정확하게 알아보지 않았던게 문제가 되었습니다.
애초에 javascript자체에 element.append()가 존재하며 jquery에는 innerHTML과 기능이 비슷한 html()이라는 메소드가 존재합니다.
굳이 비교하려면 element.innerHTML, $().html() // element.append(""), $().append()를 비교하는게 맞을거 같고
좀 더 정확하게는 append()와 html()차이정도로 해당 포스트를 참고하시면 좋을 것 같습니다.
일반적으로 dom은 jquery보다 속도면에서 훨등히 빠르고, jquery는 dom보다는 표현식이 간단한 차이가 있다.
또한 append는 타겟을 지정하여 데이터를 처리하면 처리한 태그가 추가로 처리되며
innerHTML은 타겟의 모든 데이터를 덮어씌운다.
하지만 이부분은 innerHTML += "추가할 데이터" 이러한 방법으로 대처가 가능하다.
이 부분에서 가장 해서는 안되는 방법으로 반복문 내부에 append 또는 innerHTML += 처리를 하는 것이다...
안좋은 방식)
for(i=0; i<1000; i++){
var tag = "<div id='test'+i>"+i+"</div>";
$("#innerTable").append(tag);
}
위 소스는 데이터가 커지고 그려야 할 태그가 많아지면 굉장히 위험해지는 방법이다.
브라우저에 굉장히 큰 부담을 주어 실행속도가 현저히 느려지며 생성하는데 굉장히 느려진다.
추천 방식)
var tag = "";
for(i=0; i<1000; i++){
tag += "<div id='test'+i>"+i+"</div>";
}
$("#innerTable").append(tag);빈 문자열 변수를 선언하여 해당 문자열에만 추가하는것이 좋은 방법이다.
신입일 당시 반복문 내부에서 미친듯이 찍어대는 append덕분에 클라이언트 브라우저가 심심하면 강제종료 되거나 멈추는 일이 있었는데 당시의 경험 덕분에 좋은 공부가 되었다.
이외에 추가적으로 차이점을 확인해보겠다.
예제)
<form id="searchForm" name="searchForm" method="post">
<input type="hidden" name="page" value="">
<select name="telecom">
<option value="">선택</option>
<option value="1">010</option>
<option value="2">016</option>
<option value="3">019</option>
<select>
<input type="text" name="user">
<button type="button" id="searchBtn">조회</button>
</form>form태그로 이루어진 html이다.
$("#searchList").click(function(){
var form = document.searchForm;
//dom innerHTML으로 처리하면 select선택된 값이나 입력된 값을 유지를 못함
//document.getElementById("searchForm").innerHTML = "<input value='" + token + "' name='_token' type='hidden'>";
$("#searchForm").append("<input type='hidden' name='_token' value='" + token + "'>");
form.page.value = 1;
form.action = context_path + "/action.do";
form.submit();
});조회 버튼을 클릭하게 되면 form태그 내부에 암호화 토큰값을 처리하고 조회를 하러 컨트롤러영역인 action.do로 이동한는 간단한 소스이다.
하지만 소스의 append가 아닌 innerHTML로 처리시 정상적으로 동작이 되질 않았다.
이유를 확인해보자면 innerHTML += 이부분이 문제가 되었는데, select박스에서 선택한 값이 초기화되어 컨트롤러로 넘어가게 되었고 request.parameter로 select로 넘어온 값을 아무리 확인하여도 조회가 되지 않는 현상이다.
반대로 append를 사용하게되면 태그만 추가되면서 암호화키값까지 추가되면서 문제없이 동작이 된다.
즉, 사용자(클라이언트)가 처리한 값을 유지하느냐 못하느냐의 차이가 있다.
이러한 저장기능을 지원하기 때문에 jquery 라이브러리는 dom보다 아무래도 속도면에서 떨어지지 않을까 논리적으로 이해가 되었다.