[JQUERY] .html 중에서 JQuery와 ()으로 .Append VS ()

.html 중에서 JQuery와 ()으로 .Append VS ()

해결법

1. ---

   1.당신이 jQuery의 방법 중 하나에 HTML의 문자열을 통과 할 때마다 다음과 같은 절차가 진행됩니다

   당신이 jQuery의 방법 중 하나에 HTML의 문자열을 통과 할 때마다 다음과 같은 절차가 진행됩니다

   임시 요소가 생성,의 그것이 X 호출 할 수 있습니다. X의 innerHTML을 당신이 경과 한 것을 HTML의 문자열로 설정됩니다. 그리고 JQuery와, 새로 생성 된 문서 조각에 이상 (입니다 X의 childNodes에)을 생성 각 노드를 전송되는 그 것이다 다음 시간 동안 캐시. 그런 다음 새로운 DOM의 컬렉션으로 조각의 childNodes에 반환됩니다.

   jQuery를 크로스 브라우저 검사 및 기타 다양한 최적화의 무리처럼 그것이 실제로 더 많은 것보다 복잡합니다. 예를 들면 당신이 통과하면 바로

   jQuery를 ()에, jQuery를 바로 가기를 가지고 단순히 document.createElement ( 'DIV')을 할 것입니다.

   편집 : jQuery를 수행하는이, 여기와 여기, 여기에 모양을 가지고 검사의 투명한 양을 참조하십시오.

   당신은 모든 시간을 무엇을 지배하는 것을하지 않지만 innerHTML을은 일반적으로 빠른 방법입니다. jQuery의 접근 방식은 매우 element.innerHTML 한 간단하지 않다 = ... - 내가 언급 한 바와 같이, 수표 및 발생하는 최적화의 무리가 있습니다.

   올바른 방법은 상황에 크게 의존한다. 당신이 동일한 요소의 큰 숫자를 만들려면, 당신이 원하는 마지막 것은 모든 반복에 대한 새로운 jQuery를 객체를 생성, 대규모 루프를 만드는 것입니다. 예를 들면 jQuery를 100 개 된 div를 만들 수있는 가장 빠른 방법 :

   jQuery(Array(101).join('<div></div>'));
   

   고려해야 할 가독성과 유지 보수의 문제도 있습니다.

   이:

   $('<div id="' + someID + '" class="foobar">' + content + '</div>');
   

   ...이보다 유지하는 것이 훨씬 어렵습니다 :

   $('<div/>', {
       id: someID,
       className: 'foobar',
       html: content
   });
   

2. ---

   2.그들은 동일하지 않습니다. 첫 번째는 먼저 다른 jQuery를 객체를 생성하지 않고 HTML을 대체합니다. 두번째는, 제 DIV위한 추가의 jQuery 래퍼를 생성 제에 추가한다.

   그들은 동일하지 않습니다. 첫 번째는 먼저 다른 jQuery를 객체를 생성하지 않고 HTML을 대체합니다. 두번째는, 제 DIV위한 추가의 jQuery 래퍼를 생성 제에 추가한다.

   (예를 당) 하나의 jQuery를 래퍼 :

   $("#myDiv").html('<div id="mySecondDiv"></div>');
   
   $("#myDiv").append('<div id="mySecondDiv"></div>');
   

   (예를 당) 두 jQuery를 래퍼 :

   var mySecondDiv=$('<div id="mySecondDiv"></div>');
   $('#myDiv').html(mySecondDiv);
   
   var mySecondDiv=$('<div id="mySecondDiv"></div>');
   $('#myDiv').append(mySecondDiv);
   

   당신은 몇 가지 사용 사례가 일어나고있다. 당신은 내용을 바꾸려면, innerHTML을 = "..."자사의 동등한 이후 좋은 전화를 .html. 당신은 단지 콘텐츠를 추가 할 경우, 세트 래퍼 여분의 $ ()는 불필요한입니다.

   당신이 나중에 추가 된 사업부를 조작해야하는 경우에만이 래퍼를 사용합니다. 심지어이 경우, 당신은 여전히 ​​하나를 사용해야 할 수 있습니다 :

   var mySecondDiv = $("<div id='mySecondDiv'></div>").appendTo("#myDiv");
   // other code here
   mySecondDiv.hide();
   

3. ---

   3.에 의해 당신에게 평균으로 .Append를 .add 경우, 결과는 #myDiv가 비어있는 경우 동일합니다.

   에 의해 당신에게 평균으로 .Append를 .add 경우, 결과는 #myDiv가 비어있는 경우 동일합니다.

   성능은 동일합니다? 그나마 알고있다.

   .html 중에서 (x는) .empty 같은 일을하고 끝 (). APPEND (X)

4. ---

   4.음 또는 .html () 빠른 DOM 생성보다 .innerHTML 사용합니다.

   음 또는 .html () 빠른 DOM 생성보다 .innerHTML 사용합니다.

5. ---

   5.다음과 같은 방법으로 같은 효과를 달성하기 위해 두 번째 방법을 얻을 수 있습니다 :

   다음과 같은 방법으로 같은 효과를 달성하기 위해 두 번째 방법을 얻을 수 있습니다 :

   var mySecondDiv = $('<div></div>');
   $(mySecondDiv).find('div').attr('id', 'mySecondDiv');
   $('#myDiv').append(mySecondDiv);
   

   루카는 HTML ()가 바로 했나 HTML 삽입 언급하는 빠른 성능 결과.

   하지만 일부 occassions에, 당신은 고려, 두 번째 옵션을 선택합니다 :

   // Clumsy string concat, error prone
   $('#myDiv').html("<div style='width:'" + myWidth + "'px'>Lorem ipsum</div>");
   
   // Isn't this a lot cleaner? (though longer)
   var newDiv = $('<div></div>');
   $(newDiv).find('div').css('width', myWidth);
   $('#myDiv').append(newDiv);
   

6. ---

   6..html 중에서 () 모든 것을 대체합니다.

   .html 중에서 () 모든 것을 대체합니다.

   으로 .Append () 단지 마지막에 추가합니다.

7. ---

   7.이 같은 것을 가지고있는 경우에 주어진 답보다 기타 :

   이 같은 것을 가지고있는 경우에 주어진 답보다 기타 :

   <div id="test">
       <input type="file" name="file0" onchange="changed()">
   </div>
   <script type="text/javascript">
       var isAllowed = true;
       function changed()
       {
           if (isAllowed)
           {
               var tmpHTML = $('#test').html();
               tmpHTML += "<input type=\"file\" name=\"file1\" onchange=\"changed()\">";
               $('#test').html(tmpHTML);
               isAllowed = false;
           }
       }
   </script>
   

   파일을 업로드 한 후, 첫 번째 파일 업로드 요소가 재현 될 것이기 때문에 모든 파일이 업로드 된 경우 자동으로 하나 개 이상의 파일 업로드를 추가 할 것을 의미 언급 된 코드가없는 일 때문에 업로드 된 파일은 그것에서 삭제됩니다 것 . 대신 ()으로 .Append 사용해야합니다 :

       function changed()
       {
           if (isAllowed)
           {
               var tmpHTML = "<input type=\"file\" name=\"file1\" onchange=\"changed()\">";
               $('#test').append(tmpHTML);
               isAllowed = false;
           }
       }
   

8. ---

   8.이것은 나에게 일어났다. JQuery와 버전 : 3.3. 당신이 개체의 목록을 통해 반복, 일부 부모 DOM 요소의 자식으로 각 개체를 추가 할 경우, 다음 .html 중에서 및으로 .Append 매우 다른 동작합니다. 으로 .Append는 부모 요소의 자식으로 모든 목록 개체를 추가하는 반면 .html 중에서 부모 요소에 마지막 객체를 추가 종료됩니다.

   이것은 나에게 일어났다. JQuery와 버전 : 3.3. 당신이 개체의 목록을 통해 반복, 일부 부모 DOM 요소의 자식으로 각 개체를 추가 할 경우, 다음 .html 중에서 및으로 .Append 매우 다른 동작합니다. 으로 .Append는 부모 요소의 자식으로 모든 목록 개체를 추가하는 반면 .html 중에서 부모 요소에 마지막 객체를 추가 종료됩니다.

from https://stackoverflow.com/questions/3015335/jquery-html-vs-append by cc-by-sa and MIT license