728x90
반응형
after() , insertAfter() : taget의 뒤에 원하는 내용을 붙여준다.
before(), insertBefor() : tager의 바로 앞에 원하는 내용을 붙여준다
after/before과 insertAfter/insertBefore은 target을 적어주는 위치가 다르다.
1. body
<body>
<button>after()</button>
<button>insertAfter()</button>
<button>before()</button>
<button>insertBefore()</button>
<div id="base">
<p>외부 삽입</p>
</div>
</body>
2. script
<script type="text/javascript" src="resources/js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("button:eq(0)").click(function(){
$("#base").after("<div>새로운 엘리먼트(after)</div>");
});
$("button:eq(1)").click(function(){
$("<div>새로운 엘리먼트(insertAfter)</div>").insertAfter("#base");
});
$("button:eq(2)").click(function(){
$("#base").before("<div>새로운 엘리먼트(before)</div>");
});
$("button:eq(3)").click(function(){
$("<div>새로운 엘리먼트(insertBefore)</div>").insertBefore("#base");
});
});
</script>
3. 출력화면
728x90
반응형
'Web > JQuery' 카테고리의 다른 글
| [JQ]delete (0) | 2020.08.05 |
|---|---|
| [JQ]wrap (0) | 2020.08.05 |
| [JQ]setInterval() (0) | 2020.08.04 |
| [JQ]내부삽입 (0) | 2020.08.03 |
| [JQ]replaceWith/replaceAll (0) | 2020.08.03 |
