[jquery] 컨텐츠 내용 생성 및 수정
필그램
·2017. 11. 1. 02:47
이번 내용은 다음과 같습니다.
주석 처리한 부분을 하나씩 설명합니다.
<head>
<title>Creating and Changing Content</title>
<link rel="stylesheet" href="../style.css" />
<script type="text/javascript" src="../jquery-3.0.0.js"></script>
<script type="text/javascript">
$("document").ready(function () {
// create some new content
// var newP = $("<p>");
// newP.append("<em>Hello There</em>");
// $("#example").html(newP);
//
// $("#creation").prepend("Watch This! ");
//
// // change the existing content
// $("#example").html("<h2>This is a new H2</h2>");
//
// $("#example").text("<h2>This is a new H2</h2>");
});
</script>
</head>
var newP = $("<p>");
newP.append("<em>Hello There</em>");
$("#example").html(newP);
paragraph tag <p>를 newP 라는 변수로 지정하고
2번째줄 : newP에 append뒤의 태그를 붙입니다.
아이디 example에 html 로 newP의 내용을 붙이는 것입니다.
$("#creation").prepend("Watch This! ");
아이디 creation에 다음 문장을 prepend이므로, 앞쪽에 붙입니다.
$("#example").html("<h2>This is a new H2</h2>");
아이디 example에 다음 html문을 html 문으로 붙인다는 것입니다.
브라우저를 실행하면 아래와 같습니다.
맨아래 html코드로 인식하며 This is a new H2 라고 나옵니다.
다음 코드는
$("#example").text("<h2>This is a new H2</h2>");
아이디 example에 다음 html문을 text 문으로 붙인다는 것입니다. (위와 비교하며 보시면 됩니다)
아래는 전체 소스입니다. 설명처럼 각각의 주석을 지워보며 실행시켜 보세요
<html>
<head>
<title>Creating and Changing Content</title>
<link rel="stylesheet" href="../style.css" />
<script type="text/javascript" src="../jquery-3.0.0.js"></script>
<script type="text/javascript">
$("document").ready(function () {
// create some new content
// var newP = $("<p>");
// newP.append("<em>Hello There</em>");
// $("#example").html(newP);
//
// $("#creation").prepend("Watch This! ");
//
// // change the existing content
// $("#example").html("<h2>This is a new H2</h2>");
//
// $("#example").text("<h2>This is a new H2</h2>");
});
</script>
</head>
<body>
<h1 id="intro">Using jQuery to Create/Change Content</h1>
<div id="content">
<p>jQuery makes it very easy to create new page content and change existing page content.</p>
<h2 id="creation">Content Creation</h2>
<p>Creating new content is as simple as passing a string of HTML to the $() function.</p>
<p>For example, <code>$("<p>")</code> creates a new, empty paragraph tag. To add new content to the paragraph,
you could simply write <code>$("<p>").append("<em>Hello there</em>")</code>.</p>
<h2 id="changing">Changing Content</h2>
<p>There are multiple ways to change page content using jQuery, depending on your needs.</p>
<p>The <code>html()</code> and <code>text()</code> functions can be used to directly manipulate the contents of elements,
and there are ways to control how content can be inserted and moved around in the page.</p>
<div id="example">
</div>
</div>
</body>
</html>
반응형
'프로그래밍 > jQuery' 카테고리의 다른 글
| [jQuery] 애니메이션 구현하기 (0) | 2017.11.01 |
|---|---|
| [jQuery] 제이쿼리 환경설정 (0) | 2017.11.01 |
| [jquery] 이벤트 핸들링 (0) | 2017.11.01 |
| [jQuery] 기본기 갖추기 1 (0) | 2017.11.01 |
| jQuery를 WebStorm(웹스톰)에 설정하기 (0) | 2017.11.01 |
