dom에 값을 동적으로 할당합니다.

Question

사용자 프로필 사용자 이름, 장소 등을 표시하는 html 페이지가 있습니다. jquery에서 ajax를 사용하여 값을 얻고 있습니다. 지금은 어떻게 DOM에 검색된 값을 할당하는 질문이 있습니다

첫 번째 방법을 내가 데이터를 동적으로 DOM을 만들 얻을 때까지 기다릴 더의 추가이 방법 DIV에게

$.ajax({ 
    url: "profiledata", 
    type: "POST", 
    success:function(data){ 
     $("<div><label>"+data.name</label><br/> 
      <label>"+data.place</label></div>").appendTo("target div"); 
    } 

을 대상으로 추가 될 것이다 문자열이 발생하므로 프로세스에서 소비하는 메모리에 대해 의심 스럽습니다.

두 번째 방법 단지 값을 할당 할 ID를 사용합니다 :

$.ajax({ 
    url: "profiledata", 
    type: "POST", 
    success:function(data){ 
      $("#uname").text(data.name); 
      $("#place").text(data.place); 
    } 

<div><label id="uname"></label><br/> 
<label id="place"></label></div> 

한 페이지를로드하는 측면에서 효율적입니다 즉 가벼운 코드 페이지 내가 약간의 쓰기 접근 방식을 언급 했습니까? 또는 더 나은 해결책이 있습니까?

Answer 1

사용 사례에 따라 두 솔루션 모두 장단점이 있습니다.

첫 번째 방법 : 당신이 그 (것)들에게

이 필요하지만, 그것은 또한 JQuery와 오히려 페이지의 요소를 수정하는 것보다 메모리의 요소를 생성 가질 때까지

• 이 요소를로드하지 않습니다.

두 번째 방법 :

• 그래서 마크 업을 수정 요소를 만들지 않음은 우리가 JS에서 HTML을 찾고되지 않기 때문에 조금 더 쉽다.
• 이제 우리는 우리가 사용자가 그들

내가 사용하는 것이 그 어느 방법, 다양한 요인에 따라 달라 표시하지 않으려면 요소를 숨기기 위해 기억해야합니다. 일반적으로 나는 마크 업을 수정하려고 할 때 자바 스크립트를보고 있지 않기 때문에 두 번째를 선호한다.

Answer 2

DOM 반복 조작에는 종종 오버 헤드가 포함됩니다. 그러한 관점에서 보면 첫 번째 방법이 더 적절할 것으로 보인다. 아약스 호출의 속도에 관한 한, 데이터는 두 가지 방법 모두에서 동일한 방식으로 검색됩니다. .ajaxStart() 및 .ajaxStop()을 사용하여 '로드'효과를 낼 수 있습니다.