HTML 포맷에 맞게 객체 값을 넣어서 출력하는 예제
글. 수알치 오상문
1. 객체 1개를 HTML 포맷에 맞게 출력하기
<!doctype html>
<html lang="ko">
<head>
<title> Exam </title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>JavaScript replace Exam 1</h2>
<ul id="item-list">
</ul>
<script id="html-fmt" type="text/template">
<li>{title} : {content} : {price}</li>
</script>
<script>
var data = { title: "Hello",
content: "안녕하세요, 반갑습니다!",
price: 10000
};
var format = document.querySelector("#html-fmt").innerHTML;
html = format.replace("{title}", data.title)
.replace("{content}", data.content)
.replace("{price}", data.price);
document.querySelector("#item-list").innerHTML = html;
console.log(html);
</script>
</body>
</html>
[실행 결과] 웹브라우저
[실행 결과] 콘솔창
<li>Hello : 안녕하세요, 반갑습니다! : 10000</li>
2. 객체 배열을 HTML 포맷에 맞게 출력하기
<!doctype html>
<html lang="ko">
<head>
<title> Exam </title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2> .... 우리동네 중화요리 차림표</h2>
<ul id="item-list">
</ul>
<script id="html-format" type="text/template">
<li>[{title}] {content} : {price}</li>
</script>
<script>
var data = [{ title: "해산물 짜장면",
content: "쫄깃하고 달콤한 해물 특 짜장",
price: 7000 },
{ title: "핵폭탄급 짬뽕",
content: "눈물이랑 콧물 부르스 맵 짬뽕",
price: 8000 },
{ title: "돈가스 볶음밥",
content: "볶음밥 양과 돈가스 군의 만남",
price: 10000 },
]
var format = document.querySelector("#html-format").innerHTML;
var html = "";
for(var i=0; i<data.length; i++) {
html += format.replace("{title}", data[i].title)
.replace("{content}", data[i].content)
.replace("{price}", data[i].price + "원");
}
document.querySelector("#item-list").innerHTML = html;
console.log(html);
</script>
</body>
</html>
[실행 결과] 웹 브라우저
[실행 결과] 콘솔창
<li>[해산물 짜장면] 쫄깃하고 달콤한 해물 특 짜장 : 7000원</li>
<li>[핵폭탄급 짬뽕] 눈물이랑 콧물 부르스 맵 짬뽕 : 8000원</li>
<li>[돈가스 볶음밥] 볶음밥 양과 돈가스 군의 만남 : 10000원</li>
반응형
'JavaScript, jQuery' 카테고리의 다른 글
| JQuery 기본 문법 (0) | 2022.07.10 |
|---|---|
| 자바스크립트, input type="date" 달력 값 변경하기 (0) | 2022.06.18 |
| Event Bubbling vs. Capturing (0) | 2022.06.09 |
| DOMContentLoaded vs. Load 이벤트 (0) | 2022.06.09 |
| 자바스크립트, 객체 자료형 예제 (0) | 2022.06.08 |