Notice
Recent Posts
Recent Comments
Archives
Today
Total
«   2025/01   »
일 월 화 수 목 금 토
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
Link
Tags more
관리 메뉴

드럼치는 프로그래머

[jQuery ] append(), appendTo(), html(), prepend(), prependTo(), text() 본문

★─Programing/☆─WebProgram

[jQuery ] append(), appendTo(), html(), prepend(), prependTo(), text()

드럼치는한동이 2016. 5. 31. 13:06

append() - 지정한 요소의 마지막에 내용를 추가

appendTo() - 지정한 요소의 마지막에 내용를 추가

# append()와 appendTo()는 동일한 기능을 수행하지만, 추가될 내용과 타겟의 위치가 다름.

A.append(B) - A에 B를 추가

A.appendTo(B) – B에 A를 추가

 

html(value) - 지정한 요소 내부에 새로운 html문자열(value)을 추가

 

prepend() – 지정한 요소의 시작 부분에 내용을 삽입

prependTo() – 지정한 요소의 시작 부분에 내용을 삽입

# prepend ()와 prependTo()는 동일한 기능을 수행하지만, 추가될 내용와 타겟의 위치가 다름.

A.prepend(B) - A에 B를 추가

A.prependTo(B) – B에 A를 추가

 

text(value) – 지정한 요소에 내부에 새로운 text문자열(value)을 추가

 

  

예제)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<meta http-equiv="Content-Type"content="text/html; charset=utf-8" />

<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {

           $('#appendBtn').click(function(){

                     $('#target').append($('#source'));

           });

 

           $('#appendToBtn').click(function(){

                     $('#source').appendTo($('#target'));       //append와 타겟,소스위치가 다름

           });

 

           $('#htmlBtn').click(function(){

                     $('#target').html($('#source'));

           });

 

           $('#prependBtn').click(function(){

                     $('#target').prepend($('#source'));        //prepend와 타겟,소스 위치가 다름

           });

 

           $('#prependToBtn').click(function(){

                     $('#source').prependTo($('#target'));

           });

 

           $('#textBtn').click(function(){

                     $('#target').text('이것은임의의 텍스트 문자열 입니다.');

           });

});

</script>

<title> jQuery 예제 </title>

</head>

<body>

           <fieldset>

                     <legend>Source</legend>

                     <divid="source"><strong>적용되어질 텍스트입니다.</strong></div>

           </fieldset>

           <fieldset>

                     <legend>Target</legend>

                     <divid="target">타겟 영역입니다.</div>

           </fieldset>

           <inputtype="button" id="appendBtn"value="append"></input>

           <inputtype="button" id="appendToBtn"value="appendTo"></input>

           <inputtype="button" id="htmlBtn"value="html"></input>

           <inputtype="button" id="prependBtn"value="prepend"></input>

           <inputtype="button" id="prependToBtn"value="prependTo"></input>

           <inputtype="button" id="textBtn"value="text"></input>

</body>

</html>

 

[출처] http://hohoya33.tistory.com/entry/jQuery-%E2%80%93-append-appendTo-html-prepend-prependTo-text

저작자표시 비영리 동일조건

'★─Programing > ☆─WebProgram' 카테고리의 다른 글

[JSP] Javascript 를 이용한 select box 구현  (0) 2016.05.31
[MyBatis] 동적쿼리 if 문  (0) 2016.05.31
[JavaScript] Null check, 빈 값 체크  (0) 2016.05.31
[jQuery] 이벤트 설정 시에 jQuery의 .on()을 사용하자.  (0) 2016.05.31
[Spring] 접속된 클라이언트의 아이피 확인하는 방법  (0) 2016.05.30
'★─Programing/☆─WebProgram' Related Articles more
Comments