테스트 사이트 - 개발 중인 베타 버전입니다

제이쿼리 .before(content [,content])

· 8년 전 · 1703

제이쿼리 .before(content [,content])


설명 : 일치하는 요소 세트의 각 요소 앞에 매개 변수로 지정된 컨텐츠를 삽입하십시오.


.before()및 .insertBefore()방법은 동일한 작업을 수행합니다. 

주요 차이점은 구문과 특히 콘텐츠 및 대상의 배치에 있습니다. 

With를 사용하면 .before()삽입 할 내용은 메서드의 인수에서 가져옵니다 

$(target).before(contentToBeInserted). 로 .insertBefore(), 

다른 한편으로는, 내용이 방법을 선행하고 차례로으로 전달되는 대상, 

전에 삽입 

.insertBefore()방법의 주장 : $(contentToBeInserted).insertBefore(target).


다음 HTML을 고려하십시오.


<div class="container">

  <h2>Greetings</h2>

  <div class="inner">Hello</div>

  <div class="inner">Goodbye</div>

</div>

한 번에 여러 요소 앞에 내용을 작성하고 삽입 할 수 있습니다.

$( ".inner" ).before( "<p>Test</p>" );

각 내부 <div>요소는이 새로운 내용을 얻습니다.


<div class="container">

  <h2>Greetings</h2>

  <p>Test</p>

  <div class="inner">Hello</div>

  <p>Test</p>

  <div class="inner">Goodbye</div>

</div>

페이지에서 요소를 선택하여 다른 요소 앞에 삽입 할 수도 있습니다.


$( ".container" ).before( $( "h2" ) );

이 방법으로 선택한 요소가 DOM의 다른 위치의 단일 위치에 삽입되면 대상 앞에 복제본이 이동합니다.



<h2>Greetings</h2>

<div class="container">

  <div class="inner">Hello</div>

  <div class="inner">Goodbye</div>

</div>

중요 : 그러나 하나 이상의 대상 요소가있는 경우 마지막 요소를 제외한 각 대상에 대해 삽입 된 요소의 복제본이 만들어집니다.



<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>before demo</title>

  <style>

  p {

    background: yellow;

  }

  </style>

  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>

</head>

<body>

 

<p> is what I said...</p>

 

<script>

$( "p" ).before( "<b>Hello</b>" );

</script>

 

</body>

</html>


댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시글 목록

번호 제목
15742
15741
15740
15739
15738
15736
15735
15734
15733
15732
15731
15730
15729
15728
15727
15726
15725
15724
15723
15721
15720
15719
15718
15717
15716
15715
15714
15713
15712
15711