Template literals

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals

test1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<body>
  <div id="test">
    테스트
  </div>
</body>
 
 
 
<script>
var template = `
<div class="group">
    <div class="title"></div>
  <div class="content"></div>
</div>`;
 
//alert(a.toString());
var $row = $(template.toString());
$row.find(".title").text("제목11");
$row.find(".content").text("내용22");
$("div#test").append($row);
 
$("div#test").empty();
 
var $row2 = null;
for(var i=0; i<10; i++){
    $row2 = $(template.toString());
  $row2.find(".title").text("제목" + i);
  $row2.find(".content").text("내용" + i);
  $row2.append("<hr/>");
  $("div#test").append($row2);
}
</script>
Colored by Color Scripter
cs

test2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<body>
  <div id="test">
  </div>
</body>
 
 
 
 
<script>
var $test = $("div#test");
var title = null;
var content = null;
for(var i=0; i<10; i++){
    title = "테스트 제목"+i;
    content = "테스트 내용"+i;
  $test.append(
  `<div class="group">
        <div class="title">${title}</div>
      <div class="content">${content}</div>
    </div>
  <br/>
  `
  );
}
</script>
Colored by Color Scripter
cs

test3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<body>
  <div id="test">
  </div>
</body>
 
 
 
 
<script>
var $test = $("div#test");
var title = null;
var content = null;
for(var i=0; i<10; i++){
    var obj = {
      title : "zz테스트 제목"+i,
      content : "zz테스트 제목"+i
  }
  $test.append(
  `<div class="group">
      <div class="title">${obj.title}</div>
      <div class="content">${obj.content}</div>
  </div>
  <br/>
  `
  );
}
</script>
Colored by Color Scripter
cs

JSP(JSTL, EL) 테스트
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
var v1 = 10, v2 = 20, v3 = "한글";
 
var a = `aaaa${v1+v2}aaaa`;
alert(a); // 결과 : aaaa0aaaa
 
var a = `aaaa\${v1+v2}aa\${v3}aa`;
alert(a); // 결과 : aaaa30aa한글aa
 
var a = `aaaa<%="${v1+v2}"%>aa<c:out value="${v3}"/>aa`;
alert(a); // 결과 : aaaa30aaaa
 
var a = `aaaa<%="${v1+v2}"%>aa<c:out value="\${v3}"/>aa`;
alert(a); // 결과 : aaaa30aa한글aa
</script>
Colored by Color Scripter
cs

저작자표시

'Front-End > jQuery' 카테고리의 다른 글

HTML5 input required, $("input:invalid") 활용 (0)	2018.02.13
jquery promise, Deferred 테스트 (0)	2018.01.30
jQuery Selectable(UI) 컨트롤안누르고도 다중선택하기 (0)	2014.05.07
jquery 강제 엔터처리 (0)	2014.01.20
jqGrid Pager(Navigator) 옵션주기 (0)	2012.11.01

'Front-End > jQuery' 카테고리의 다른 글

티스토리툴바