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

일반적으로 요소를 동적으로 생성하는 방법은 두 가지가 있습니다
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와 $("

") 개체를 생성합니다.

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.