<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel = "stylesheet" href = "../css/mystyle.css" type="text/css">
<script src="../js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$('#result1 p').on('click', function(){
vimg = $(this).attr('title')
appimg = $('<img>', {
'src' : '../images/' + vimg + '.jpg',
'alt' : vimg,
'width' : '100px',
'hight' : '100px'
}).prependTo(this);
$(this).prepend(
$('<img>', {
'src' : '../images/' + vimg + '.jpg',
'alt' : vimg,
'width' : '100px',
'hight' : '100px'
})
)
})
$('p').on('click', function(){
vimg = $(this).attr('title')
appimg = $('<img>', {
'src' : '../images/' + vimg + '.jpg',
'alt' : vimg,
'width' : '100px',
'hight' : '100px'
})
//apping.prependTo(this)
//$(this).prepend(appimg);
})
$('#result2 p').on('click', function(){
vimg = $(this).attr('title');
appimg = $('<img>',{
'src' : '../images/' + vimg + '.jpg',
'alt' : vimg,
'width' : '100px',
'hight' : '100px'
})
//$(this).after(appimg);
//appimg.insertAfter(this);
$(this).before(appimg);
//밑으로 가는 건 after, 옆으로 가는 건 apend
})
})
</script>
<style>
p{
border : 1px solid pink;
padding : 5px;
}
</style>
</head>
<body>
<div class = "box">
append / prepend : 대상 selector의 테두리 안쪽으로 추가<br>
뒤로 추가<br>
appendTo(selecter)<br>
append(content)<br>
앞으로 추가<br>
prependTo(selector)<br>
prepend(content)<br>
<br>
<div id = "result1">
<p title="Tulips">튜울립</p>
<p title="Chrysanthemum">국화</p>
<p title="Koala">코알라</p>
<p title="Hydrangeas">수국 </p>
</div>
</div>
<div class = "box">
after/before : 대상 selector 테두리 바깥쪽으로 추가<br>
뒤로 추가<br>
insertAfter(selecter)<br>~에게
after(content)<br>~를
앞으로 추가<br>
insertBefore(selector)<br>
before(content)<br>
<br>
<div id = "result2">
<p title="Tulips">튜울립</p>
<p title="Chrysanthemum">국화</p>
<p title="Koala">코알라</p>
<p title="Hydrangeas">수국 </p>
</div>
</div>
</body>
</html>
신입 개발자 입니다!!!