서버에 많은 부하를 주면 성능적인 문제가 많이 발생
보안적인 문제가 없다면 클라이언트 브라우저가 렌더링을 하는 것이 이득
동적인
없던 것을 만들어 내는 함수 4가지
before : 처리하기 전의 엘리먼트
prepend
append
after : 처리한 엘리먼트
어떤 타겟으로 엘레먼트를 잡았을 때 동적으로 데이터가 들어가는 위치를 정해 줄 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.5.0.js" integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc=" crossorigin="anonymous"></script>
<style>
.box{border:1px solid black; width: 200px;text-align: center;}
</style>
<script>
$(function(){
$(".box").before("Dynamic Data Before");
$(".box").after("Dynamic Data After");
$(".box").prepend("Dynamic Data Prepend<br>");
$(".box").append("Dynamic Data Append");
})
</script>
</head>
<body>
<div class="box">원본데이터<br></div>
</body>
</html>텍스트 자체를 넣어주는 것보다
요소를 만들어서 넣어주면 가독성이 좋아진다 (오타찾기)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.5.0.js" integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc=" crossorigin="anonymous"></script>
<style>
div{
border:1px solid black;
}
.box{
width: 200px;
text-align: center;
}
</style>
<script>
$(function(){
var beforeDate = $("<div></div>");
beforeDate.prepend("Dynamic Data Before");
$(".box").before(beforeDate);
$(".box").after("Dynamic Data After");
$(".box").prepend("Dynamic Data Prepend<br>");
$(".box").append("Dynamic Data Append");
})
</script>
</head>
<body>
<div class="box">원본데이터<br></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.5.0.js" integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc=" crossorigin="anonymous"></script>
<style>
div{
border:1px solid black;
}
.box{
width: 200px;
text-align: center;
}
</style>
<script>
$(function(){
var beforeDate = $("<div></div>");
beforeDate.addClass("ABC");
beforeDate.prepend("Dynamic Data Before");
$(".box").before(beforeDate);
$(".box").after("Dynamic Data After");
$(".box").prepend("Dynamic Data Prepend<br>");
$(".box").append("Dynamic Data Append");
})
</script>
</head>
<body>
<div class="box">원본데이터<br></div>
</body>
</html>
'디지털 컨버전스 > Java Script' 카테고리의 다른 글
| [JQuery] JQuery의 배열에 기능 적용 (0) | 2020.04.20 |
|---|---|
| [JQuery] 동적 테이블 (0) | 2020.04.20 |
| [JQuery] 예제 - 줄색 바꾸기 (0) | 2020.04.17 |
| [JQuery] 예제 - 비밀번호 일치 (0) | 2020.04.17 |
| [JQuery] 예제 - 메세지 이동 (0) | 2020.04.17 |