FRONT END/jquery

jquery 태그 추가

자코린이 2022. 2. 10. 17:46

.prepend() - 원하는 곳의 맨 앞에 태그를 추가한다.

 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>
<body>
<div>
<h2>Greetings</h2>
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
<button onclick="outPut()">
input
</button>


<script>
function outPut(){
$( ".inner" ).prepend( "<p>Test</p>" );
}
</script>
</body>
</html>

.append() - 원하는 곳의 맨 마지막에 태그를 추가한다.

 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>
<body>
<div>
<h2>Greetings</h2>
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
<button onclick="outPut()">
input
</button>


<script>
function outPut(){
$( ".inner" ).append( "<p>Test</p>" );
}
</script>
</body>
</html>

이 방법을 이용하면 사용자가 이벤트를 주면 그 이벤트에 맞는 페이지를 만들어 줄 수 있다.

예를 들어, 사용자가 물건들의 목록을 원하면 그 목록을 ajax를 사용하여 빠르게 가지고 올 수 있다.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Shoping List</title>
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</script>
<style>
:root {
--ion-safe-area-top: 20px;
--ion-safe-area-bottom: 22px;
}
</style>
</head>
<body>
<ion-app>
 
<ion-tabs>
<ion-tab tab="music">
<ion-header translucent>
<ion-toolbar>
<ion-title>List</ion-title>
</ion-toolbar>
</ion-header>

<ion-content fullscreen class="ion-padding" id="list">
 
</ion-content>
</ion-tab>
</ion-tabs>
</ion-app>
</body>
<script>
function outPut() {
// console.log("a");
var param = {};

 
$.ajax({
data: param,
type: 'get',
success: function (data) {
//console.log(data);

var results = eval(data);
console.log(data);
var str = ' ';
$.each(results, function (i) {
str += '<ion-card>';
str += '<img src='+ results[i]["thumbnailUrl"] +'/>';
str += ' <ion-card-header>';
str += ' <ion-card-subtitle>'+ results[i]["id"] +'</ion-card-subtitle>';
str += ' <ion-card-title>'+ results[i]["title"] +'</ion-card-title>';
str += ' </ion-card-header>';
 
str += ' <ion-card-content>';
str += ' ';
str += '</ion-card-content>';
str += '</ion-card>';
});
$("#list").empty();
console.log(str);
$("#list").append(str);
// console.log(str);
 
},
error: function () {
 
alert("error");
}
});
}
</script>
<script>
$(document).ready(function () {
outPut();
});
</script>
</html>

 

이 코드는 fakeJSON의 사이트인 https://jsonplaceholder.typicode.com/ 에서 가지고 온 데이터를 기반으로 만든 하이브리드 앱 프레임워크 (ionic)을 이용하여 만든 화면입니다. 디자인은 안 만들었지만 ionic에서 제공하는 기본 컴포넌트를 이용하여 만들었습니다.

ListExample.html
0.00MB
완성본입니다.

 

 

저작자표시

'FRONT END > jquery' 카테고리의 다른 글

연속된 이미지 슬라이드로 보여주기  (0) 2023.06.20

'FRONT END/jquery'의 다른글

  • 현재글jquery 태그 추가

관련글

티스토리툴바