[JS/jQuery] append(), html()

JavaScript

- element.append()

- element.innerHTML

 

jQuery

- $().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);

안 좋은 방식의 코드는

데이터가 커지고 그려야 할 태그가 많아지면 굉장히 위험한 방법이다

브라우저에 굉장히 큰 부담을 주어 실행속도가 현저히 느려지며 생성하는데 굉장히 느려진다.

 

추천 방식의 코드는

빈 문자열 변수를 선언하여 해당 문자열에만 추가하는 방법이다.

 

 

innerHTML, html()

var test = 'Test';

document.getElementById("testTable").innerHTML = "<input value='" + test + "' type='hidden'>";

문제가 있다면,

만약 test가 프론트에서 select 선택된 값이나 입력된 값을 받고, 컨트롤러영역이나 데이터 영역으로 넘길 경우

그 값이 초기화되어 값 유지가 되지 않는다.

 

jQuery의 append

$("#testTable").append("<input value='" + test + "' type='hidden'>");

를 사용하면 태그만 추가되면서 값도 같이 추가되어 값을 넘겨줄 수 있다.

 

 

즉, 사용자(클라이언트)가 처리한 값을 유지하느냐 못하느냐의 차이가 있다.

 

 

 

https://myhappyman.tistory.com/43

Javascript - $().append(), Element.innerHTML 차이점