728x90
반응형
prepend() : target의 자식요소 중 가장 앞에 추가
append() : target의 자식요소 중 뒤에 추가
html() : html 태그 반영하여 문맥 추가
text(): 태그 반영없이 추가
<body>
<body>
<button>prepend</button>
<button>append</button>
<button>html</button>
<button>text</button>
<div>
<p>내부 삽입 1</p>
<p>내부 삽입 2</p>
</div>
</body>
<script>
<script type="text/javascript" src="resources/js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(function(){
var cnt=0;
$("button:eq(0)").click(function(){
//$("target").prepend(): target의 자식요소 중 가장 앞에 추가
$("div").prepend($("<p>").addClass("prepend").text("prepend" + (++cnt)));
// ($(<"p>")) createElement
});
$("button:eq(1)").click(function(){
//$("target").append(): target의 자식요소 중 뒤에 추가
$("div").append($("<p>").addClass("append").text("append" + (++cnt)));
});
$("button:eq(2)").click(function(){
$("div").html("<b>html요소를 바꾼다</b>");
});
$("button:eq(3)").click(function(){
$("div").text("<b>text요소를 바꾼다</b>");
})
});
</script>
<출력화면>
1) prepend/append
2) html
3) text
728x90
반응형
'Web > JQuery' 카테고리의 다른 글
| [JQ]외부삽입 (0) | 2020.08.04 |
|---|---|
| [JQ]setInterval() (0) | 2020.08.04 |
| [JQ]replaceWith/replaceAll (0) | 2020.08.03 |
| [JQ]toggleClass (0) | 2020.08.03 |
| [JQ]toggleClass (0) | 2020.08.03 |
