[jQuery] 제이쿼리에서 문장 생성 및 변경
필그램
·2017. 11. 6. 00:49
다음의 제이쿼리를 연습할 예정입니다.
<script type="text/javascript">
$("document").ready(function () {
alert($("#example").html()); // alert 생성
document.getElementById("create").addEventListener("click", function (evt) {
createContent();
}); //자바스크립트로서 create를 클릭하면 createCo~함수실행
document.getElementById("change").addEventListener("click", function (evt) {
changeContent();
}); //자바스크립트로서 create를 클릭하면 changeCo~함수실행
document.getElementById("changeAll").addEventListener("click", function (evt) {
changeAllTheContent();
}); //자바스크립트로서 create를 클릭하면 changeAl~함수실행
});
function createContent() {
$("#example").html("<p>안녕하세요</p>");
}
function changeContent() {
var newItem = $("<p>새로운 문장입니다. </p>");
$("#example").html(newItem);
}
function changeAllTheContent() {
$("#example p").text("모든 문장을 변경합니다!!!");
}
</script>
[전체 HTML]
<html>
<head>
<title>Creating New Content</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../style.css" />
<script type="text/javascript" src="../jquery-3.0.0.js"></script>
<script type="text/javascript">
$("document").ready(function () {
alert($("#example").html());
document.getElementById("create").addEventListener("click", function (evt) {
createContent();
});
document.getElementById("change").addEventListener("click", function (evt) {
changeContent();
});
document.getElementById("changeAll").addEventListener("click", function (evt) {
changeAllTheContent();
});
});
function createContent() {
$("#example").html("<p>안녕하세요</p>");
}
function changeContent() {
var newItem = $("<p>새로운 문장입니다. </p>");
$("#example").html(newItem);
}
function changeAllTheContent() {
$("#example p").text("모든 문장을 변경합니다!!!");
}
</script>
</head>
<body>
<h1>문장 변경 </h1>
<div id="content">
<p>jQuery </p>
<ul id="list1">
</ul>
<div id="example">
<p class="a">문장 1</p>
<p id="para1">문장 2</p>
<p class="b">문장 3</p>
<p id="para4" lang="en-us">문장 4</p>
<p id="para5" lang="en-gb">문장 5</p>
</div>
<div>
<button id="create">Create Content</button>
<button id="change">Change Content</button>
<button id="changeAll">Change All</button>
</div>
</div>
</body>
</html>
각각 실행시의 화면
'프로그래밍 > 웹프로그래밍' 카테고리의 다른 글
| [jQuery] 제이쿼리 DATA (0) | 2017.11.06 |
|---|---|
| [jQuery] 제이쿼리와 CSS (0) | 2017.11.06 |
| [jQuery] 제이쿼리 attr() 이해하기 (0) | 2017.11.06 |
| [jQuery] 제이쿼리 콘텐츠 변경방법 (0) | 2017.11.06 |
| [jQuery] 제이쿼리 콘텐츠 삽입하기 (0) | 2017.11.06 |
