< HTML-Element abrufen >
| 방법 | 역할 |
| 텍스트() | 선택한 HTML 요소의 텍스트 콘텐츠를 가져오거나 설정합니다. |
| HTML() | 선택한 HTML 요소에서 HTML 태그를 포함한 콘텐츠를 가져오거나 설정합니다. |
| 값() | 선택한 HTML 양식 요소의 속성 값을 가져오거나 설정합니다. |
| 속성() | 선택한 HTML 요소의 속성 값을 가져오거나 설정합니다. |
1) text() / html() / val() 메서드
– 텍스트() : 항목의 텍스트만 가져오기
-html(): 뿐만 아니라 HTML 태그 가져왔다
– 발() : 입력 태그에 입력된 값 가져오기
2) attr() 메소드
– HTML 요소의 속성에 설정된 속성 값을 가져오기 위해 사용합니다.
– 코드는 attr 메소드를 사용하여 img 클래스의 src 속성을 다른 이미지로 변경했습니다.
< Elemente hinzufügen / einfügen / löschen >
(기존 요소 내부에 추가)
1) 추가() 메서드
– 선택한 항목의 끝에서 새로운 HTML 요소나 콘텐츠를 추가할 때 사용합니다.
$(목표).붙이다(원천)
– 대상 개체의 끝에 소스 개체를 추가합니다.
– 아래와 같은 HTML 요소가 있는 경우
- 첫 번째 항목
- 두 번째 포인트
– 두 번째 이후에 .append() 메서드를 사용할 수 있습니다.
$(“#목록”).붙이다(“
“);
* 코드 실행 결과
2) prepend() 메서드
– 첨부의 반대 선택한 항목 중 첫 번째 항목으로 새로운 요소나 콘텐츠를 추가합니다.
3) appendTo() 메서드
– 선택한 항목을 ‘항목 끝’에 추가합니다.
– 동작은 append() 메소드와 동일하나, 소스와 대상 위치가 바뀝니다.
$(원천).추가(목표)
– 대상 개체의 끝에 소스 개체를 추가합니다.
다음과 같은 HTML 요소가 있는 경우:
안녕하세요
첫 번째 이후에 appendTo() 메서드를 사용할 수 있습니다.
새 HTML 요소를 추가합니다.
$(“jQuery.“).appendTo(“p”);
4) 메소드 prependTo()
– 선택한 항목을 ‘첫 번째 항목’에 추가합니다.
– 동작은 prepend() 메서드와 동일하나 소스와 타겟 위치가 뒤바뀐다.
$(원천).앞에 두다(목표)
– 소스 개체를 첫 번째 대상 개체에 추가합니다.
(기존 요소 외부에 추가)
1) before() 메서드
– 선택한 항목의 ‘직전’ 새로운 요소나 콘텐츠를 추가합니다.
$(목표).전에(원천)
대상 개체 바로 앞에 소스 개체를 추가합니다.
*예
– 버튼을 클릭할 때마다 변수 i가 증가하여 표시됩니다.
– p 이전에 생성됩니다.
2) after() 메서드
– 선택한 요소 ‘바로 뒤에’ 새 요소 또는 콘텐츠를 추가합니다.
$(목표).후에(원천)
– 대상 개체 바로 뒤에 소스 개체를 추가합니다.
* 추가/앞 추가와 전/후의 차이점
위의 코드가 있다면, 출력 결과는
– append의 경우 ol의 내부 요소인 li에 들어가 그 안에 생성되며,
after의 경우 ol의 외부에 다음 요소로 추가되었습니다.
– 이후에 위의 첨부파일과 같은 항목을 추가하고 싶다면 셀렉터를 #list>li:last 로 변경하여 첨부파일처럼 생성합니다.
=> 차이점은 append는 선택한 요소 내부에 생성되고 after는 선택한 요소 외부에 바로 뒤에 생성된다는 것입니다!
3) insertBefore() 메서드
– 선택한 항목을 ‘항목 앞에’ 추가합니다.
– 동작은 .before() 메서드와 동일하나 소스 위치와 대상 위치가 뒤바뀐다.
$(소스).insertBefore(대상)
– 대상 개체 바로 앞에 원본 개체를 추가합니다.
– 버튼을 누를 때마다 “i번째 문장입니다”가 반복됩니다. 버튼을 누를 때마다 p 태그 앞에 생성됩니다.
4) insertAfter() 메서드
– 선택한 항목 “요소 뒤에”를 추가하십시오.하다.
– 동작은 .after() 메서드와 동일하나 출발지와 도착지 위치가 뒤바뀐다.
$(소스).insertAfter(대상)
– 대상 개체 바로 뒤에 소스 개체를 추가합니다.
– 키를 누를 때마다 문장이 출력됩니다.
– 결과 출력 버튼을 누를 때마다 p 태그 아래에 문장이 생성됩니다.
(기존 항목을 포함하는 항목 추가)
1) wrap() 메소드
– “선택된 요소”를 둘러싸는 새 요소를 추가합니다.
$(함수() {
$(“버튼”).on(“클릭”, function(){
$(“피”).랩(“
“);
});
});
– 아래와 같은 HTML 요소가 있는 경우
안녕하세요
이것은 포장입니다.
wrap() 메서드를 사용하여 추가할 수 있습니다.
– 새 HTML 요소에 요소를 래핑합니다.
$(“피”).랩(“
– 아웃풋을 보라 모든 p 요소div 상자로 둘러싸여 있습니다.
2) wrapAll() 메소드
– “선택한 모든 항목”을 한 번에 래핑하는 새 항목을 추가합니다.
$(함수() {
$(“버튼”).on(“클릭”, function(){
$(“p”).wrapAll(“
“);
});
});
– 아래와 같은 HTML 요소가 있는 경우,
안녕하세요
WrapAll.
– wrapAll() 메서드를 사용하여 모든
– 요소는 한 번에 새 HTML 요소로 래핑됩니다.
$(“p”).wrapAll(“
– 출력 결과, 선택한 p 요소를 바로 div 상자로 둘러쌉니다.
3) wrapinner() 메서드
– ‘선택한 요소 내’를 감싸는 새 요소를 추가합니다.
다음과 같은 HTML 요소가 있는 경우:
랩핑 이너입니다.
– wrapInner 메서드를 사용하여 내부를 래핑합니다.
– 새 HTML 요소로 요소를 래핑합니다.
– 출력 결과 각 div가 선택한 p-tag에 삽입됩니다.
(기존 요소의 내부 수정)
1) html() 메서드
– 선택한 요소의 내용을 새 HTML 요소로 변경합니다.
다음과 같은 HTML 요소가 있는 경우:
안녕하세요
-html() 메서드를 사용하여 파일의 내용을 표시할 수 있습니다.
-새로운 HTML 요소에 대한 요소.
$(‘p’).html(“
“);
2) 텍스트() 메서드
– text() 메서드는 선택한 요소의 내용을 새로운 일반 텍스트로 변경합니다.
다음과 같은 HTML 요소가 있는 경우:
안녕하세요
– text() 메서드를 사용하면 요소의 내용을 편집할 수 있습니다.
새 텍스트로 변경합니다.
$(“p”).text(“텍스트입니다.”);
html() 메소드와 text() 메소드의 차이점
– html()에서 선택한 요소의 내용에 HTML 태그 요소가 포함되어 있으면 태그가 적용되어 표시되지만, text()의 경우 HTML 태그가 적용되지 않고 텍스트가 그대로 표시됩니다. .
다음과 같은 HTML 요소가 있는 경우:
안녕하세요
아래와 같이 HTML을 사용하여 문장을 표시하면 HTML 태그가 적용되지 않은 문장이 그대로 표시됩니다.
$(“피”).텍스트(“
“);
– 텍스트 방식 사용 예
출력 결과 텍스트 방식에서는 텍스트가 그대로 표시되므로 태그도 출력됩니다.
– html() 메소드 사용 예
따라서 태그는 보이지 않고 텍스트만 보입니다.