Designer · Publisher

[자바스크립트&제이쿼리] .text() .html() .prepend() .append() .before() .after() .wrap() .wrapAll() .wrapInner() 본문

M

[자바스크립트&제이쿼리] .text() .html() .prepend() .append() .before() .after() .wrap() .wrapAll() .wrapInner()

Hoit_:D 2017. 5. 28. 11:20
  • HTML5 / CSS3 태그

 

.text() .html() 텍스트 변경 명령어

.text() : 태그 인식X
.html() : 태그 인식O
$('선택자').명령어(실행)

첫번째 a태그의 텍스트를 HOME 으로 변경
$('.gnb li a:first').text('HOME')

두번째 a태그의 텍스트를 KHJ으로 변경하되, strong 태그로 추가되도록 설정
$('.gnb li a:eq(1)').html('<strong>KHJ</strong>')    

 

html태그 삽입 명령어 (.prepend() .append() .before() .after())

.prepend() - 선택자의 안쪽 맨 앞에 추가
$('.gnb').prepend('<li><a href="#">START</a></li>')

.append() - 선택자의 안쪽 맨 뒤에 추가
$('.gnb').append('<li><a href="#">END</a></li>')

.before() - 선택자 바로 앞에 추가
$('.gnb li:eq(2)').before('<li><a href="#">PROFILE</a></li>')

 .after() - 선택자 바로 뒤에 추가   
$('.gnb li:eq(4)').after('<li><a href="#">BOARD</a><ali>')

 

html태그 이동 명령어 (.prependTo() .appendTo() .insertBefore() .insertAfter())

.prependTo() - 선택자를 안쪽 맨 앞으로 이동
.appendTo() - 선택자를 안쪽 맨 뒤으로 이동
.insertBefore() - 선택자를 바로 앞으로 이동
.insertAfter() - 선택자를 바로 뒤으로 이동

$('이동시키려는 선택자').명령어('이동시킬 위치')

$('.gnb li:eq(1)').prependTo('.gnb2')
.gnb에 있는 HOME을 .gnb2 맨 앞으로 이동

$('.gnb li:last').appendTo('.gnb2')
.gnb에 있는 END를 .gnb2 맨 뒤로 이동

$('.gnb li:eq(1)').insertBefore('.gnb2 li:eq(1)')
.gnb에 있는 두번째 선택자를 .gnb2 두번째 선택자 뒤로 이동

$('.gnb li:eq(1)').insertAfter('.gnb2 li:last')
.gnb에 있는 두번째 선택자를 .gnb2 마지막으로 이동
    

 

.wrap() .wrapAll() .wrapInner()

$('.gnb').wrap('<nav class="nav"></nav>')
.wrap() - 선택자를 원하는 id&class로 그룹화 할 때 사용하는 명령어 (2개이상은 각각 적용)

$('.gnb').wrapAll('<nav class="nav"></nav>')
.wrap() - 선택자를 원하는 id&class로 그룹화 할 때 사용하는 명령어 
            몇개가 있던 하나로 감싸지고 중간에 태그가 있는경우 뒤로 밀어버림

$('body').wrapInner('<div class="header"></div>')
.wrapInner() - 선택자의 안쪽에 있는 태그들을 그룹화 할 때 사용하는 명령어

 

 

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

'M' 카테고리의 다른 글

[자바스크립트&제이쿼리] 대입연산자, 문자결합연산자, 산술연산자, 증감연산자  (0) 2017.05.31
[자바스크립트&제이쿼리] 변수, 숫자, 문자, 논리값(블린) 데이터 등  (0) 2017.05.28
[자바스크립트&제이쿼리]  (0) 2017.05.28
[HTML5&CSS3] 선택자/속성선택자/구조선택자  (0) 2017.05.28
[M] 모바일 높이값  (0) 2017.05.19
'M' Related Articles more
Comments