jQuery의 insertBefore() 메소드를 사용하는 방법-JS 튜토리얼-php.cn

jQuery의 insertBefore() 메소드를 사용하는 방법

青灯夜游

풀어 주다： 2021-04-22 15:31:02

원래의

5053명이 탐색했습니다.

jQuery의 insertBefore() 메소드는 지정된 요소 앞에 일부 HTML 컨텐츠를 삽입하는 데 사용됩니다. 사용법 구문은 "$(content).insertBefore(target)"입니다.

jQuery의 insertBefore() 메소드를 사용하는 방법

이 문서의 운영 환경: Windows 7 시스템, Dell G3 컴퓨터, jquery 버전 3.2.1.

insertBefore()는 지정된 요소 앞에 일부 HTML 콘텐츠를 삽입하는 데 사용되는 jQuery의 내장 메서드입니다. 다음 글에서는 insertBefore()의 사용법을 소개하겠습니다. 도움이 되셨으면 좋겠습니다.

jQuery의 insertBefore() 메서드

insertBefore() 메서드는 지정된 요소가 나타날 때마다 HTML 콘텐츠를 삽입합니다. [동영상 튜토리얼 추천: jQuery tutorial]

기본 문장 구조:

$(content).insertBefore(target)

로그인 후 복사

설명:

content: 대상을 지정하기 전에 삽입해야 하는 HTML 콘텐츠를 나타냅니다.

target: 지정된 대상을 나타냅니다.

insertBefore() 메서드 사용 예

예 1:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".demo").click(function() {
// insertBefore 
$("<div>在PHP中文网中学习！</div>").insertBefore("p");
});
});
</script>
</head>
<body>
<div class="box">
<p>学习jQuery</p>
<div class="demo">单击此处</div>
</div>
</body>
</html>

로그인 후 복사

Rendering:

jQuery의 insertBefore() 메소드를 사용하는 방법

Description:

DOM(Document Object Model) )이 로드되었으며 페이지가 ( Ready 이벤트는 이미지를 포함한 객체가 완전히 렌더링되었을 때 발생합니다. 하지만, Ready() 함수는 Ready 이벤트가 발생할 때 실행되어야 하는 코드를 지정합니다.

$(".demo").click(): .demo 요소에서 클릭 이벤트가 발생할 때 실행되어야 하는 코드를 나타냅니다.

예 2:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".demo").click(function() {
// insertBefore 
$("<div>在PHP中文网中学习！</div>").insertBefore("p");
});
});
</script>
</head>
<body>
<div class="box">
<p>学习jQuery</p>
<p>学习php</p>
<div class="demo">单击此处</div>
</div>
</body>
</html>

로그인 후 복사

렌더링:

jQuery의 insertBefore() 메소드를 사용하는 방법