반응형
JQuery
개념
<body>
<h1>내부요소추가하기</h1>
<button>prepend</button>
<button>append</button>
<button>html</button>
<button>text</button>
<button>DOM이동</button>
<div class="insert1">
<p class="a">내부추가하기</p>
</div>
<br/>
<div class="insert1">
<p>여기로 이동</p>
</div>
<hr/>
<h1>외부요소추가</h1>
<button>after</button>
<button>before</button>
<button>DOM이동</button>
<div class="insert2">
<p class="a">외부추가하기</p>
</div>
<br/>
<div class="insert2">
<p>여기로 이동</p>
</div>내부
추가
html()
$(".insert1").html("<b>html메서드는 내부 내용을 추가</b>");//set
var val=$(".insert1").html();//gettext()
$(".insert1").append("<p class='append'>append메서드</p>");append() - 뒤로 추가
$(".insert1").append("<p class='append'>append메서드</p>");prepend() - 앞으로 추가
JQ
$(".insert1").prepend("<p class='prepend'>prepend메서드</p>");
JS
var div= document.getElementByClassName("insert1")[0];
var newp=document.createElement("p");
newp.textContent="insertBefore메서드";
var oldp=document.getElementByClassName("a")[0];
div.insertBefore(newp,oldp);DOM이동
insert1이라는 클래스명을 가진 2번째 div태그로 이동
$(".insert1:eq(1)").append($(".insert1").eq(0).children().first());외부
추가
after()
$(".insert2").eq(0).after("<div class='add'>"+count++ +"</div>");before()
$(".insert2").eq(0).before("<div class='add'>"+count++ +"</div>");삭제
<div id="container">
<p>타겟삭제하기</p>
<p>내부요소 삭제하기</p>
<p>잘라내기</p>
</div>remove() -타겟요소삭제
$("#container > p").eq(0).click(function(){
$("#container > p:eq(0)").remove();
});empty() -타겟내부를 삭제
$("#container > p").eq(1).click(function(){
$("#container").empty();
});detach()-타겟을 잘라내기,삭제요소 저장가능
$("container > p").eq(2).click(function(){
var p=$("#container > p:eq(2)").detach();
alert(p.prop("tagName"));
});$("#container > p").eq(0).click(function(){
$("#container > p:eq(0)").remove();
});
그외
<body>
<div id="menu">
<div class="sub_menu">
<a href="#">회사소개</a>
</div>
<div class="sub_menu">
<a href="#">솔루션</a>
</div>
<div class="sub_menu">
<a href="#">고객</a>
</div>
<div class="sub_menu">
<a href="#">인재채용</a>
</div>
</div>
</body>부모로 추가: 타겟을 감싼다
wrap() : 타겟의 부모요소를 추가
unwrap() : 타겟의 부모요소를 삭제
$(".sub_menu").click(function(){
$(".sub_menu").unwrap(".box");
$(this).wrap("<div class='box'></div>");
});반응형
'Front-end > JQuery' 카테고리의 다른 글
| (JQuery)AJAX 비동기구현 (0) | 2023.03.08 |
|---|---|
| (JQuery)DOM탐색 메서드 연습문제 (0) | 2023.03.07 |
| (JQuery)이벤트 전파, 기본기능 금지 메서드 (0) | 2023.03.06 |
| (JQuery)DOM탐색 메서드 (0) | 2023.03.06 |
| (JQuery)셀렉터 표현식 (0) | 2023.03.06 |