[jQuery] .before()

.before()

선택한 요소 이전에 새로운 요소를 추가합니다.

.before()

특징	설명
리턴 값	jQuery
버전	1.x
사용성

정의(Definition)

.before("태그") 메서드는 선택한 요소 이전에 태그를 추가합니다.
.before("선택자") 메서드는 선택한 요소 이전에 선택자를 추가합니다
.before("함수") 메서드는 선택한 요소 이전에 함수를 설정합니다.

문법(Syntax)

$("선택자").before("태그");
$("선택자").before("선택자");
$("선택자").before("함수");

예제1(Sample)

선택한 요소 다음에 새로운 요소를 추가하는 예제입니다.

리셋 버튼을 클릭하면 첫 번째 박스 뒤에 박스가 추가됩니다. 버튼을 클릭하면 첫 번째 박스 앞에 박스가 추가됩니다.

HTML

CSS

SCRIPT

<div class="after-box">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

.after-box {
    display: flex;
    flex-wrap: wrap;
}
.after-box .box {
    min-width: 150px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    color: #fff;
    position: relative;
    font-size: 12px;
    overflow: hidden;
    margin: 10px;
    background-color: #A2CBFA;
    border: 1px solid #4390E1;
    box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
}
.after-box .box.plus {
    border-style: dashed;
    background-color: #faa2aa;
    border: 1px solid #e1434a;
    box-shadow: 0 2px 2px rgba(225,67,74,0.05), 0 4px 4px rgba(225,67,74,0.05), 0 8px 8px rgba(225,67,74,0.05), 0 16px 16px rgba(225,67,74,0.05);
}

//Javascript none

호환성(Compatibility)

메서드	버전						6	7	8	9	10	11
before()	jQeury 1.x 버전	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능
	jQeury 2.x 버전	사용가능	사용가능	사용가능	사용가능	사용가능	사용안됨	사용안됨	사용안됨	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능
	jQeury 3.x 버전	사용가능	사용가능	사용가능	사용가능	사용가능	사용안됨	사용안됨	사용안됨	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능