03-3.엘리먼트 콘텐츠 설정

 엘리먼트 콘텐츠 설정

 

[ HTML과 텍스트 콘텐츠 대체 ]

html() - 일치하는 집합에서 첫 번째 엘리먼트의 HTML 콘텐츠를 가져온다.

html(text) - 전달된 HTML 코드를 모든 일치하는 엘리먼트의 콘텐츠로 설정.

text() - 확장 엘리먼트의 모든 텍스트 콘텐츠를 결합하여 커맨드의 결과로 반환.
- 반환값 : 결합된 문자열

 

예제)

1. <ul id="theList">
    <li>하나</li>
    <li>둘</li>
    <li>셋</li>
    <li>넷</li>
   </ul>
2. var text = $('#theList').text();

설명) text변수에 '하나둘셋넷'이 설정된다.

text(content) - 모든 확장 엘리먼트의 텍스트 콘텐츠를 전달된 값으로 설정.
- content : (String) 설정할 텍스트가 '<' 또는 '>'을 포함한다면, 그 문자는 HTML 엔티티로 대체.

 

 

[ 엘리먼트 복사 / 이동 ]

append(content) - 일치하는 모든 엘리먼트의 콘텐츠에 전달된 HTML 코드나 엘리먼트를 덧붙인다.
- content : (String|Element|Object) 확장 집합의 엘리먼트에 추가할 문자열, 엘리먼트, 확장 엘리먼트 집합.

 

예제1)

1. $('p').append('<b>텍스트</b>');

설명1) 페이지에 있는 모든 <p> 엘리먼트 콘텐츠의 끝에 전달된 문자열을 추가.

예제2)

1. $("p.appendToMe").append($("a.appendMe"))

설명2) appendMe 클래스가 있는 모든 링크를 모두 선택하여 appendToMe 클래스를 지닌 <p> 엘리먼트에 덧붙인다.
대상이 하나이면 원본 엘리먼트는 기존 위치에서 삭제되고 덧붙여지도록 지정된 새로운 부모 엘리먼트의 위치로 이동한다.(이동)
대상이 여러 개라면  원본 엘리먼트는 그대로 남아 있고 각 대상에 복사본이 추가된다.(복사)

appendTo(target) - 확장 집합의 모든 엘리먼트를 target의 끝으로 이동.
- target : (String|Element) 셀렉터가 두 개 이상 엘리먼트에 일치하면 엘리먼트는 복사되고, 그런 다음에 일치하는 각 엘리먼트에 추가.
- 대상이 하나일 경우 엘리먼트가 이동하고, 대상이 여러 엘리먼트이면 원본 엘리먼트는 기존 위치에 남아 있고 각 대상에 복사본이 추가.

prepend() 와 prependTo() - append() 와 appendTo()와 유사하게 동작하지만 원본 엘리먼트를 대상 엘리먼트 앞에 삽입.

before()와 insertBefore() - 엘리먼트를 대상의 첫 번째 자식으로 삽입하는 대신에 대상의 바로 앞 형제로 삽입.

after()와 insertAfter() - 엘리먼트를 대상의 마지막 자식으로 삽입하는 대신에 대상의 바로 뒤 형제로 삽입.

 

[ 엘리먼트 감싸기 ]

wrap(wrapper) - 일치하는 집합의 엘리먼트를 전달된 HTML 태그나 엘리먼트의 복사보능로 감싼다.
- wrapper : (String|Element) 일치하는 집합 내에 있는 각 엘리먼트를 감싸려는 HTML 코드 문자열 또는 래퍼로 제공되고 복사될 엘리먼트

예제1)

1. $("a.surprise").wrap("<div class='hello'></div>")

설명1) hello 클래스를 지닌 <div> 엘리먼트로 surprise 클래스가 있는 링크를 감싼다.

예제2)

1. $("a.surprise").wrap($("div:first")[0]);

설명2) 페이지의 첫 번째 <div> 엘리먼트를 복사하여 surprise 클래스를 지닌 링크를 감싼다.

wrapAll(wrapper) - 일치하는 집합 내에 있는 모든 엘리먼트를 전달된 HTML 태그나 전달된 엘리먼트의 복사본으로 감싼다. 일치하는 집합을 하나의 단위로 취급한다.
- wrapper : (String|Element) 일치하는 집합의 각 엘리먼트를 감싸려는 HTML 코드 문자열 또는 래퍼로 제공되고 복사될 엘리먼트

wrapInner(wrapper) - 일치하는 집합에서 엘리먼트의 텍스트 노드를 포함한 콘텐츠를 전달된 HTML 태그나 엘리먼트의 복사본으로 감싼다.
- wrapper : (String|Element) 일치하는 집합의 각 엘리먼트를 감싸려는 HTML 코드 문자열 또는 래퍼로 제공되고 복사될 엘리먼트

※ wrapAll()과 wrapInner()의 차이점 : wrapAll() 메서드는 집합의 모든 엘리먼트를 한 개의 단위로 감싸고, wrapInner() 메서드는 엘리먼트의 콘텐츠를 감싼다.

 

 

[ 엘리먼트 제거 ]

remove() - 페이지 DOM에서 확장 집합의 모든 엘리먼트를 삭제.

empty() - 일치하는 집합의 모든 DOM 엘리먼트의 콘텐츠를 제거.

예제1)

1. $("div.elementToReplace").after("<p>div를 대체한다.</p>").remove();

설명1) remove()와 after() 커맨드를 사용하여 대체 연산을 수행.
after() 함수가 <div> 엘리먼트를 포함하는 원본 확장 집합을 반환하여 새로 생성한 <p> 엘리먼트로 대체.

예제2)

1. $.fn.replaceWith = function(html) {
    return this.after(html).remove();
   };
2. $("div.elementToReplace").replaceWith("<p> div를 대체한다.</p>");

설명2) 예제1과 동일한 기능.

 

 

[ 엘리먼트 복사 ]

clone(copyHandlers) - 확장 집합에 있는 엘리먼트를 복사하여 이를 포함하는 새로운 확장 집합을 반환. 엘리먼트와 자식 모두 복사. 옵션에 따라 이벤트 핸들러의 복사 여부가 결정.
- copyHandlers : (Boolean) true이면 이벤트 핸들러를 복사, false이거나 생략하면 복사하지 않는다.

예제1)

1. $('img').clone().appendTo('fieldset.photo');

설명1) 모든 이미지 엘리먼트의 복사본을 만들어서 photo 클래스를 가진 모든 <fieldset> 엘리먼트에 덧붙인다.

예제2)

1. $('ul').clone().insertBefore('#here');

설명2) 모든 <ul> 엘리먼트의 복사본(자식인 <li> 엘리먼트 포함)을 만들어서 here 아이디를 가진 엘리먼트 바로 앞에 삽입.

예제3)

1. $('ul').clone().insertBefore('#here').end().hide();

설명3) 모든 <ul> 엘리먼트의 복사본(자식인 <li> 엘리먼트 포함)을 만들어서 here 아이디를 가진 엘리먼트 바로 앞에 삽입한 뒤 원본 확장 집합을 화면에서 감춘다.

 

 

[ 폼 엘리먼트 값 ]

val() - 일치하는 집합에 있는 첫 번째 엘리먼트의 value 프로퍼티를 반환. 다중 선택이 가능한 엘리먼트면, 반환값은 선택된 값의 배열.

예제1)

1. $('[name=radioGroup]:checked').val()

설명1) radioGroup이라는 이름을 가진 선택된 라디오 버튼의 값을 반환. 아무것도 선택되지 않았다면 undefined를 반환.

val(value) - 매개변수로 전달된 값을 일치하는 모든 폼 엘리먼트의 value 프로퍼티로 설정
- value : (String) 확장 집합에 있는 각 폼 엘리먼트의 value 프로퍼티에 설정할 문자열

value(values) - values 배열의 값과 일치하는 확장 집합에 있는 체크박스, 라디오 버튼을 선택하고 <select> 엘리먼트의 옵션을 선택.
- values : (Array) 엘리먼트의 선택 여부를 결정하는 데 사용하는 값의 배열.

예제)

1. $('input,select').val(['하나','둘','셋']);

설명) 문자열이 '하나'나 '둘' 또는 '셋'과 일치하는 값을 가진 페이지의 모든 <input>과 <select> 엘리먼트를 찾아 발견된 체크박스나 라디오 버튼을 선택하고 <select> 엘리먼트의 옵션을 선택한다.

 

이 글은 스프링노트에서 작성되었습니다.