제이쿼리 .before(content [,content]) > 개발자팁

개발자팁

개발과 관련된 유용한 정보를 공유하세요.
질문은 QA에서 해주시기 바랍니다.

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

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

본문

제이쿼리 .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>


추천
0

댓글 0개

전체 5,352
개발자팁 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT