jquery의 동적으로 elements를 생성하는 방법 소개 및 적용

jquery의 동적으로 elements를 생성하는 방법 소개 및 적용_jquery

WBOY

풀어 주다： 2016-05-16 17:35:58

원래의

809명이 탐색했습니다.

일반적으로 요소를 동적으로 생성하는 방법은 두 가지가 있습니다
1. Dom HTML

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

var select = document.createElement("select"); 
select.options[0] = new Option("추가 기능1", "value1") 
select.options [1] = new Option("add-in2", "value2"); 
select.size = "2" 
testDiv.appendChild(select) 
}); > 
 문서의 createElement 메소드를 통해 생성한 후,appendChild 메소드를 통해 지정된 객체에 추가합니다

2. JQuery 함수로 생성
$("

")
append,appendto,prepend,prependto 및 기타 방법을 통해 지정된 개체에 추가합니다. 자세한 내용은

http를 확인하세요. ://www.jb51.net/article/35845.htm

3. 페이지가 로드되면 페이지가 로드된 후 생성을 수행하는 것이 가장 좋습니다. window.onload, 하지만 새 요소를 추가할 때 브라우저는 DOM 트리가 구축된 후뿐만 아니라 모든 이미지 및 기타 외부 리소스가 완전히 로드되어 브라우저 창에 표시된 후에도 window.onload 함수를 실행합니다. 특정 이미지나 기타 리소스를 로드하는 데 시간이 오래 걸리면 다음 페이지를 방문하세요. 사용자에게 불완전한 페이지가 표시되고, 이미지가 로드되기 전에도 동적으로 추가된 요소에 의존하는 스크립트가 실행되어 스크립트 오류가 발생합니다
.
해결책은 DOM이 구문 분석될 때까지 기다린 다음 외부 리소스가 로드되기 전에 이미지를 추가하고 함수를 실행하는 것입니다. jQuery에서 이 구현을 가능하게 만드는 것입니다

코드 복사 코드는 다음과 같습니다. $(document).ready(

function() { testDiv.innerHTML = "< div style="border:solid 1px #FF0000">동적으로 생성된 $(document).ready(function) 메소드

"; }

); 

또는 간단한 사용 구문:

코드 복사 코드는 다음과 같습니다. //jQuery는 $( function) method

function() { testDiv.innerHTML = "$(function) 메소드 사용
"; } 
); 


함수를 래핑하려면 $()를 사용하세요. 그리고 기존 window.onload를 사용하면 하나의 함수만 호출할 수 있습니다. >
따라서 DOM을 수정하는 함수를 호출하려면 이 방법을 사용하세요. 또한 document.createElement와 innerHTML의 차이점을 참고하세요. 가능하다면 document.createElement와 $(" ") 개체를 생성합니다. 