개발자의 끄적끄적

[javascript/jquery] 자바스크립트 - append, prepend, after, before - 추가[펌] 본문

개발/javascript & jquery

[javascript/jquery] 자바스크립트 - append, prepend, after, before - 추가[펌]

효벨 2020. 1. 30. 03:00
728x90
반응형

[javascript/jquery] 자바스크립트 - append, prepend, after, before - 추가[펌]

 

비슷하지만 다른 메소드 입니다.

태그의 내부와 외부에 값이 들어가는 차이가 있고 앞부분과 뒷부분에 들어가는 차이가 있습니다.

 

◎ append() - 컨텐츠를 선택된 요소 내부의 끝 부분에서 삽입
◎ prepend() - 콘텐츠를 선택한 요소 내부의 시작 부분에서 삽입
◎ after() - 선택한 요소 뒤에 컨텐츠 삽입
◎ before() - 선택된 요소 앞에 컨텐츠 삽입

 

간단하게 예를 들어보면

 

<p>  중앙  </p>  이렇게 태그가 있을경우

 

append() 는    <p>  중앙  여기에 값이들어감</p>

prepend() 는   <p>여기에 값이들어감  중앙  </p>

after() 는        <p>  중앙  </p>여기에 값이들어감

before() 는      여기에 값이들어감<p>  중앙  </p> 

 

중앙 이라는 글자 대신 다른 태그가 들어가 있다면 결과물의 배치가 달라지겠죠...^^

--------------------------------------

부모자식관계
$(A).append(B) : 위에서 언급한 메소드이다. 부모 A태그 가장 뒤에 B태그를 위치시킴
$(A).prepend(B) : 부모 A태그 가장 앞에 B태그를 위치시킴
$(A).appendTo(B) : to로 인해 헷갈릴 수 있는 메서드다 주의하자. A태그를 부모 B태그 가장 뒤에 위치시킴
$(A).prependTo(B) : A태그를 부모 B태그 가장 앞에 위치시킴


형제관계
$(A).before(B) : A객체 앞에 B를 위치시킴
$(A).after(B) : A객체 뒤에 B를 위치시킴
$(A).insertBefore(B) : A객체를 B앞에 위치시킴
$(A).insertAfter(B) : A객체를 B뒤에 위치시킴

 

------------------------------------

1. 태그 다루기

태그명을 사용   $("태그명") or $('태그명')

클래스명을 사용 $(".클래스명") or $('.클래스명')

아이디명을 사용 $("#아이디명") or $('#아이디명')

 

  1. <!DOCTYPE html>

  2. <html>

  3. <head>

  4. <meta charset="UTF-8">

  5. <title>1.태그 다루기</title>

  6. <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

  7. <script type="text/javascript">

  8.     // 모든 div 태그의 텍스트를 "goal"로

  9.     $(document).ready(function(){

  10.         var divs = $("div");

  11.         divs.text("goal");

  12.     });

  13. </script>

  14. </head>

  15. <body>

  16.     <div>0</div>

  17.     <div>1</div>

  18.     <div>2</div>

  19.     <div>3</div>

  20. </body>

  21. </html>

 

※ 코드 실행후 콘솔창에 다음과 같은 메세지가 출력되면...

jquery warning(event.returnValue is deprecated. Please use the standard event.preventDefault() instead.)이 발생하며 다음의 게시글 참조 http://cafe.naver.com/jjdev/1508

 

 

 

2. 자식 태그 다루기

 

  1. <!DOCTYPE html>

  2. <html>

  3. <head>

  4. <meta charset="UTF-8">

  5. <title>2.특정 태그의 자식 태그 다루기</title>

  6. <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

  7. <script type="text/javascript">

  8.     // div태그아래 두번째(인덱스값 1) span 태그의 텍스트를 "goal"로

  9.     $(document).ready(function(){

  10.         var goal = $("div span:eq(1)");

  11.         goal.text("goal");

  12.     });

  13. </script>

  14. </head>

  15. <body>

  16.     <p>

  17.         <span>p태그 내부의 span</span>

  18.     </p>

  19.     <div>

  20.         <span>0</span>

  21.         <span>1</span>

  22.         <span>2</span>

  23.     </div>

  24. </body>

  25. </html>

 

 

3. 태그(노드)관련 자주사용되는 jQuery 메서드

 

① contents() : 자식태그(노드)의 집합체를 리턴

var goal = $("body").contents();

console.log(goal.size());

 

var goal = $("body").contents(":first");  // body의 첫번째 자식 태그(노드)를 리턴

var goal = $("body").contents(":eq(0)");  // body의 첫번째 자식 태그(노드)를 리턴

var goal = $("body").contents().first();  // body의 첫번째 자식 태그(노드)를 리턴

var goal = $("body").contents().eq(0);    // body의 첫번째 자식 태그(노드)를 리턴

 

② parent() : 부모태그(노드)를 리턴

var goal = $("#test").parent();  // 아이디가 test인 태그(노드)의 부모 태그(노드)를 리턴

 

③ prev(), next() : 동일 부모아래 이전, 다음 태그(노드)를 리턴

var goal = $("body").contents().first().next();  // body아래 첫번째 태그(노드)의 다음 태그(노드)를 리턴

 

④ html() : 태그(노드) 추가

var goal = $("#goal");

goal.html("<span>hello</span>");

 

⑤ remove() : 태그(노드) 삭제

$("#goal").remove();

 

⑥ append() : 텍스트(텍스트노드) 추가

$("#goal").append("hello");

 

⑦ text() : 텍스트(텍스트노드) 수정

 

$("#goal").text("hello");

 

출처 : https://blog.naver.com/oihijkoh/220958834611

반응형
저작자표시 비영리 변경금지

'개발 > javascript & jquery' 카테고리의 다른 글

[javascript] 연속된 글자 체크 함수 : 1234 or 1111 (숫자, 알파벳 지원) [펌]  (0) 2020.02.02
[javaScript] 회원가입 폼 유효성검사 (정규식) [펌]  (0) 2020.02.02
[javascript] 자바스크립트 모두선택 / 해제  (0) 2020.01.30
[javascript/jquery] removeClass() 사용법  (0) 2020.01.29
[javascript & jquery] attr() 사용법  (0) 2020.01.29
'개발/javascript & jquery' Related Articles more
Comments