버튼태그와 6개의 li태그가 있다.
html( ) 과 text( )의 차이점
버튼을 클릭했을 시 menu아이디를 가진 ul태그에 각 메소드를 적용했을 시
리턴값을 콘솔에 나타내도록 한다.
html 메소드의 경우 ul태그안에 존재하는 내용을 태그까지 합하여 출력한다.
여기서 리턴값은 DOM형태가 아닌 문자열임을 유의한다.
text 메소드의 경우 ul태그안에 존재하는 내용 중 텍스트노드의 내용만을 출력한다.
html( )을 이용해 노드 내용 변경하기
li태그를 클릭할 시 클릭된 해당 li태그를 item에 지정한다.
지정된 li태그에 html을 적용해 특정 링크가 걸린 a태그로 변경하고
인덱스 값을 이용해 메뉴의 내용을 적어준다.
메뉴4를 클릭하자 링크가 걸린 태그로 변경된다.
하지만 this가 li태그를 가르키고 html메소드는 그 내용을 변경하므로
li태그 자체가 a태그로 변경되는 것은 아님을 알아야한다.
text( )를 이용해 노드 내용 변경하기
이번엔 html 대신 text메소드를 적용한다.
text메소드는 오로지 text태그안의 내용만을 바꿔줄 수 있다.
메뉴4를 클릭하자 text내용만이 바뀐다.
'Front-end > JavaScript' 카테고리의 다른 글
| [자바스크립트] css스타일 속성 표기법, 단위 생략 (0) | 2022.05.27 |
|---|---|
| [자바스크립트] js 스타일 접근, jQuery css 접근, 다중 접근, getComputedStyle, style, css (0) | 2022.05.27 |
| [자바스크립트] 노드 삭제하기, remove, html, even, odd (0) | 2022.05.26 |
| [자바스크립트] 노드 위치 변경하기, append, insertAfter, insertBefore (0) | 2022.05.25 |
| [자바스크립트] 노드 생성하기, prepend, append, insertBefore, insertAfter, before, after, prependTo, appendTo (0) | 2022.05.23 |