jquery_jquery를 기반으로 DOM 요소를 동적으로 생성하는 데 대한 문제

코드 복사 코드는 다음과 같습니다.

아직도 즐겨 사용하겠지만 알고 있는 사람이 얼마나 됩니까? 이는 잘못된 접근 방식입니다! 오류 원인:
(1) 페이지가 로드될 때 페이지 구조가 변경됩니다. IE6에서는 네트워크 속도가 느려지거나 페이지 내용이 너무 크면 "종료 작업"이 발생합니다. " 오류가 발생합니다. 즉 "페이지가 로드될 때 페이지의 DOM 모델을 변경하지 마십시오."
(2) 수정된 HTML 콘텐츠를 사용하여 요소를 추가하는 것은 실제 작업에서 DOM 표준을 준수하지 않습니다. , 또한 이 방법을 사용하여 콘텐츠를 수정한 후 일부 브라우저에서는 다른 브라우저의 디스플레이 엔진이 다르기 때문에 추가된 요소를 브라우저에 즉시 표시할 수 없습니다. 그러나 Dom의 CreateElement를 사용하여 객체를 생성하면 거의 모든 브라우저에서 가능하지만 jQuery에서는 들어오는 것이 완전한 HTML 문자열이고 innerHTML도 내부적으로 사용되므로 innerHTML 함수의 사용이 완전히 무효화되는 것은 아니므로 지금부터는 이를 포기하시기 바랍니다.
HTML DOM을 사용하여 생성하는 방법에 대해 다음은 간단한 예입니다. 첫 번째 올바른 방법:

코드 복사 코드는 다음과 같습니다.

//Dom 표준을 사용하여 요소 생성
var select = document.createElement( "select");
select.options[0] = new Option("추가 기능 1", " value1")
select.options[1] = new Option("추가 기능2", " value2");
select.size = "2";
var object = testDiv.appendChild(select );

document.createElement 메소드를 사용하여 Dom 요소를 생성할 수 있습니다. 를 추가한 다음,appendChild 메서드를 통해 지정된 개체에 추가합니다.
두 번째 방법: HTML 문자 문자열이 속성이 없는 요소인 경우 Jquery
를 사용하여 요소를 생성합니다. 예:

//jQuery는 내부적으로 document.createElement를 사용하여 요소를 생성합니다:


$(""). css("border","solid 1px #FF0000").html("동적으로 생성된 div ").appendTo(testDiv);
그렇지 않으면 innerHTML 메소드를 사용하여 요소를 생성합니다:

//jQuery 내부 사용 innerHTML 생성 요소:

$("dynamically Created div") .appendTo(testDiv)