jquery
jQuery - DOM 요소를 추가 (또는 삭제)하기
다음 표의 메소드를 이용하면 해당하는 요소를 조작할 수 있습니다.
이제 맨 앞이나 맨 마지막에 새로운 내용을 추가해 보겠습니다.
선택한 요소의 이전이나 다음에 새로운 요소를 추가합니다.
다음은 자식요소 중에서 class 속성을 가진 요소만 제거합니다.
아래 예시는 단순히 <div> 태그에 <p> 태그로 삽입한 결과입니다.
다음은 .wrapAll() 에 대한 예제입니다. .wrapAll() 는 .wrap() 와는 달리 해당하는 모든 요소의 부모요소로 삽입합니다.
이렇게 말이지요.
.wrapInner() 는 지정된 요소를 선택한 요소의 하위요소로 감쌀 수 있습니다.
<li> 요소 중에서 세 번째 요소를 찾아 콘솔에 출력합니다.
매치하는 모든 요소를 찾으려면 매개변수를 생략하세요.
메소드 | 설 명 |
---|---|
.append() .appendTo(). |
선택한 요소의 자식요소 맨 끝에 새로운 내용을 추가 Ex.1) $(선택한 요소).append(추가요소) Ex.2) $(추가요소).appendTo(선택한 요소) |
.prepend() .prependTo() |
선택한 요소의 자식요소 맨 앞에 새로운 내용을 추가 Ex.1) $(선택한 요소). prepend (추가요소) Ex.2) $(추가요소). prependTo (선택한 요소) |
.after() .insertAfter() |
선택한 요소 뒤에 새로운 내용을 추가 Ex.1) $(선택한 요소).after(추가요소) Ex.2) $(추가요소).insertAfter(선택한 요소) |
.before() .insertBefore() |
선택한 요소 앞에 새로운 내용을 추가 Ex.1) $(선택한 요소). before (추가요소) Ex.2) $(추가요소). insertBefore (선택한 요소) |
.replaceAll() .replaceWith() |
선택한 요소를 새로운 요소로 변경 Ex.1) $(변경 요소). replaceAll (선택한 요소) Ex.2) $(선택한 요소). replaceWith (변경 요소) |
.clone(boolean) | 선택한 요소를 복사 boolean에는 true | false 중 하나 true이면 하위 요소 모두를 복사합니다. |
.detach() | 자식요소를 포함하여 선택한 요소를 삭제 (단, 삭제한 요소를 변수에 담아 재사용 가능) |
.remove() | 자식요소를 포함하여 선택한 요소를 삭제 |
.empty() | 선택한 요소의 모든 자식요소와 내용을 제거 (단, 선택한 요소는 삭제하지 않음) |
.wrap() | 선택한 각 요소 주위에 지정된 요소로 감싸기 |
.wrapAll() | 선택한 요소 주위에 지정된 요소로 한꺼번에 감싸기 |
.wrapInner() | 지정된 요소를 선택한 요소의 하위요소로 감싸기 |
.unwrap() | 선택한 요소의 부모 요소를 삭제 |
.index() | 선택한 요소의 지정한 자식요소의 인덱스를 반환 |
.get() | 선택한 모든 요소를 배열로 반환 |
.html() | 선택한 요소의 내용(HTML + 텍스트)을 얻거나 설정 |
.text() | 선택한 요소의 내용(텍스트)을 얻거나 설정 |
.append() 와 .prepend()
이 메소드는 선택한 요소의 맨 앞이나 맨 마지막에 새로운 요소나 내용을 추가할 수 있습니다.<style>
.use-nth {
border: 1px solid;
width: 200px;
padding: 10px;
}
</style>
<script>
$(function(){
// 맨 앞에 요소를 추가
$(".use-nth").prepend("<div style='background:red;'>처음 요소</div>");
// 맨 마지막에 요소를 추가
$(".use-nth").append("<div style='background:yellow;'>마지막 요소</div>");
});
</script>
<div class="use-nth">
<div class="2">사파리</div>
<div class="3">크롬</div>
<div class="4">엣지</div>
<div class="5">파이어폭스</div>
<div class="6">익스플러어</div>
</div>
이제 맨 앞이나 맨 마지막에 새로운 내용을 추가해 보겠습니다.
<style>
.use-nth {
border: 1px solid;
width: 200px;
padding: 10px;
}
</style>
<script>
$(function(){
// 맨 앞에 내용을 추가
$(".use-nth").prepend("안녕!");
// 맨 마지막에 내용을 추가
$(".use-nth").append(" 만나서 반가워~");
});
</script>
<div class="use-nth">
하보니
</div>
.after() 와 before()
.append() 나 .prepend() 는 선택한 요소의 자식요소 맨 앞이나 맨 뒤에 추가하는 반면 .after() 과 .before() 는 선택한 요소의 형제요소 뒤나 앞에 추가합니다.<style>
.use-nth {
border: 1px solid;
width: 200px;
padding: 10px;
}
</style>
<script>
$(function(){
// 선택한 요소 맨 끝에 삽입
$(".use-nth").after("<div style='background:red;'>사파리</div>");
// 선택한 요소 맨 처음에 삽입
$(".use-nth").before("<div style='background:yellow;'>익스플러어</div>");
});
</script>
<div class="use-nth">
<div class="3">크롬</div>
<div class="4">엣지</div>
<div class="5">파이어폭스</div>
</div>
선택한 요소의 이전이나 다음에 새로운 요소를 추가합니다.
<style>
.use-nth {
border: 1px solid;
width: 200px;
padding: 10px;
}
</style>
<script>
$(function(){
// 선택한 요소 다음에 삽입
$(".use-nth .3").after("<div style='background:red;'>구글</div>");
// 선택한 요소 이전에 삽입
$(".use-nth .5").before("<div style='background:yellow;'>하보니</div>");
});
</script>
<div class="use-nth">
<div class="2">사파리</div>
<div class="3">크롬</div>
<div class="4">엣지</div>
<div class="5">파이어폭스</div>
<div class="6">익스플러어</div>
</div>
.replaceAll() 와 .clone()
.replaceAll() 은 선택한 요소를 새로운 요소로 교체하고, .clone() 는 선택한 요소를 복사를 합니다.<style>
.use-nth {
border: 1px solid;
width: 200px;
padding: 10px;
}
</style>
<script>
$(function(){
var clone = $(".use-nth").clone(true);
$(clone).replaceAll(".use-nth2");
});
</script>
<div class="use-nth2">
하보니
</div>
<div class="use-nth">
<div class="2">사파리</div>
<div class="3">크롬</div>
<div class="4">엣지</div>
<div class="5">파이어폭스</div>
<div class="6">익스플러어</div>
</div>
.detach() 와 .empty()
.remove() 는 선택한 요소와 자식요소 모두를 삭제하지만 .empty() 는 선택한 요소를 제외한 자식요소를 제거합니다. 따라서 .detach() 를 적절히 활용하면 요소를 이동시키는 효과를 얻을 수 있습니다.<style>
.use-nth {
border: 1px solid;
width: 200px;
padding: 10px;
}
</style>
<script>
$(function(){
var val = $(".use-nth").detach();
$(".use-nth2").replaceWith(val);
});
</script>
<div class="use-nth2">
하보니
</div>
<div class="use-nth">
<div class="2">사파리</div>
<div class="3">크롬</div>
<div class="4">엣지</div>
<div class="5">파이어폭스</div>
<div class="6">익스플러어</div>
</div>
다음은 자식요소 중에서 class 속성을 가진 요소만 제거합니다.
<style>
.use-nth {
border: 1px solid;
width: 200px;
padding: 10px;
}
</style>
<script>
$(function(){
$(".use-nth div").detach("[class]");
});
</script>
<div class="use-nth2">
하보니
</div>
<div class="use-nth">
<div class="2">사파리</div>
<div class="3">크롬</div>
<!-- 엣지만 제거되지 않습니다. -->
<div>엣지</div>
<div class="5">파이어폭스</div>
<div class="6">익스플러어</div>
</div>
.wrap(), .wrapAll(), .wrapInner(), .unwrap()
선택한 요소에 지정한 요소로 상위요소를 감쌀 수 있습니다. 예를 들어 <div> 태그마다 상위에 <p> 요소를 부모요소로 삽입합니다.<p class='use-nth'>
<div>하보니</div>
</p>
<p class='use-nth'>
<div>PHP</div>
</p>
아래 예시는 단순히 <div> 태그에 <p> 태그로 삽입한 결과입니다.
<style>
.use-nth {
border: 1px solid;
width: 200px;
padding: 10px;
background: yellow;
}
</style>
<script>
$(function(){
$("div").wrap("<p class='use-nth'></p>");
});
</script>
<div>하보니</div>
<div>PHP</div>
다음은 .wrapAll() 에 대한 예제입니다. .wrapAll() 는 .wrap() 와는 달리 해당하는 모든 요소의 부모요소로 삽입합니다.
<p class='use-nth'>
<div>하보니</div>
<div>PHP</div>
</p>
이렇게 말이지요.
<style>
.use-nth {
border: 1px solid;
width: 200px;
padding: 10px;
background: yellow;
}
</style>
<script>
$(function(){
$("div").wrapAll("<p class='use-nth'></p>");
});
</script>
<div>하보니</div>
<div>PHP</div>
.wrapInner() 는 지정된 요소를 선택한 요소의 하위요소로 감쌀 수 있습니다.
<div>
<b>하보니</b>
</div>
<div>
<b>PHP</b>
</div>
<script>
$(function(){
$("div").wrapInner("<b/>");
});
</script>
<div>하보니</div>
<div>PHP</div>
.index()
.index() 는 선택한 요소의 자식요소 중에서 매치하는 요소의 인덱스를 반환합니다. 다음은 "div" 요소 중에서 "class=5" 인 인덱스를 반환합니다.<script>
$(function(){
var indexNum = $("div").index($(".5"));
console.log(indexNum);
/* 결과: 5 */
});
</script>
<!-- index: 0 -->
<div class="0">
<!-- index: 1 -->
<div class="1">알 수 없는 브라우저</div>
<!-- index: 2 -->
<div class="2">사파리</div>
<!-- index: 3 -->
<div class="3">크롬</div>
<!-- index: 4 -->
<div class="4">엣지</div>
<!-- index: 5 -->
<div class="5">파이어폭스</div>
<!-- index: 6 -->
<div class="6">익스플러어</div>
<!-- index: 7 -->
<div class="7">기타</div>
</div>
.get()
.index() 와는 반대로 지정한 인덱스에 매치되는 요소를 찾습니다. 인덱스를 지정하지 않으면 매치하는 모든 요소를 배열로 반환합니다.<li> 요소 중에서 세 번째 요소를 찾아 콘솔에 출력합니다.
<script>
$(function(){
var get = $("li").get(2);
console.log(get);
/* 결과: <li>파이어폭스</li> */
});
</script>
<ul>
<li>사파리</li>
<li>크롬</li>
<li>파이어폭스</li>
<li>IE</li>
</ul>
매치하는 모든 요소를 찾으려면 매개변수를 생략하세요.
<script>
$(function(){
var arr = $("li").get();
for(i in arr){
console.log(arr[i]);
}
/*
결과:
<li>사파리</li>
<li>크롬</li>
<li>파이어폭스</li>
<li>IE</li>
*/
});
</script>
<ul>
<li>사파리</li>
<li>크롬</li>
<li>파이어폭스</li>
<li>IE</li>
</ul>
.val() 과 .html()
val() 과 html() 의 차이점은 문자열로 얻거나 아니면 HTML 태그로 얻을 수 있습니다.<script>
$(function(){
$("div.1").html("<b>안녕 하보니~</b>");
$("div.2").text("<b>안녕 하보니~</b>");
});
</script>
<div class="1">하보니</div>
<div class="2">PHP</div>
0 댓글