집 > 기사 > 웹 프론트엔드 > jQuery의 DOM 노드 작업 방법 요약

jQuery의 DOM 노드 작업 방법 요약

小云云원래의: 2018-01-24 15:40:031531검색

이 글은 주로 jQuery에서 DOM 노드를 작동하는 전체 방법을 소개합니다. 관심 있는 친구들이 이 글을 통해 jQuery에서 DOM 노드를 작동하는 방법을 더 잘 배울 수 있기를 바랍니다.

append(content | fn): 일치하는 각 요소에 콘텐츠를 추가합니다.

예: 모든 단락에 일부 HTML 태그를 추가합니다.

<p>I would like to say: </p>
$("p").append("<b>Hello</b>");
[ <p>I would like to say: <b>Hello</b></p> ]

appendTo(): 이 메서드는 기존의 $(A).append(B) 작업을 반대로 합니다. 즉, B를 A에 추가하는 대신 A를 B에 추가합니다

예: 모든 단락 추가 ID 값이 foo인 요소입니다.

<p>I would like to say: </p>
<p></p><p></p>
$("p").appendTo("p");
<p><p>I would like to say: </p></p>
<p><p>I would like to say: </p></p>

prepend(): 일치하는 각 요소 안에 콘텐츠를 추가합니다

예: 모든 단락에 일부 HTML 마크업 코드를 추가합니다.

<p>I would like to say: </p>
$("p").prepend("<b>Hello</b>");
[ <p><b>Hello</b>I would like to say: </p> ]

prependTo(content):

일치하는 모든 요소를 지정된 다른 요소 세트 앞에 추가합니다. 실제로 이 방법을 사용하면 기존의 $(A).prepend(B) 작업이 반전됩니다. 즉, B를 A 앞에 추가하는 대신 A를 B 앞에 추가합니다.

예: ID 값이 foo인 요소에 모든 단락을 추가합니다.

<p>I would like to say: </p><p id="foo"></p>
$("p").prependTo("#foo");
<p id="foo"><p>I would like to say: </p></p>

after(): 일치하는 각 요소 뒤에 콘텐츠를 삽입합니다. 삽입된 요소와 삽입된 요소는 동일한 수준의 비부모-자식 관계에 속합니다

예: 모든 단락 뒤에 일부 HTML 마크업 코드를 삽입합니다.

<p>I would like to say: </p>
$("p").after("<b>Hello</b>");
<p>I would like to say: </p><b>Hello</b>

before(): 일치하는 각 요소 앞에 콘텐츠를 삽입합니다.

예: 모든 단락 앞에 일부 HTML 마크업 코드 삽입

<p>I would like to say: </p>
$("p").before("<b>Hello</b>");
[ <b>Hello</b><p>I would like to say: </p> ]

insertAfter(): 지정된 다른 요소 집합 뒤에 일치하는 모든 요소를 삽입합니다. 실제로 이 방법을 사용하면 기존의 $(A).after(B) 작업이 반전됩니다. 즉, A 뒤에 B를 삽입하는 대신 A가 B

뒤에 삽입됩니다. 예: 모든 단락을 요소 뒤의 항목에 삽입합니다. $("#foo").after("p")

<p>I would like to say: </p><p id="foo">Hello</p>
$("p").insertAfter("#foo");
<p id="foo">Hello</p><p>I would like to say: </p>

insertBefore()와 동일: 일치하는 모든 요소를 지정된 다른 요소 세트 앞에 삽입합니다. 실제로 이 방법을 사용하면 기존의 $(A).before(B) 작업이 반전됩니다. 즉, A 앞에 B를 삽입하는 대신 A가 B 앞에 삽입됩니다.

예: 요소 앞에 모든 단락을 삽입합니다. $("#foo").before("p")와 동일합니다.

<p id="foo">Hello</p><p>I would like to say: </p>
$("p").insertBefore("#foo");
<p>I would like to say: </p><p id="foo">Hello</p>

wrap(): 일치하는 모든 요소를 다른 요소의 구조화된 마크업으로 래핑합니다.

이러한 종류의 래핑은 원본 문서의 의미 품질을 손상시키지 않고 문서에 추가적인 구조적 마크업을 삽입하는 데 가장 유용합니다. 이 함수의 원리는 제공된 첫 번째 요소(제공된 HTML 마크업 코드에서 동적으로 생성됨)를 검사하고 해당 코드 구조에서 최상위 상위 요소를 찾는 것입니다. 이 상위 요소는 래핑 요소입니다. HTML 마크업 코드의 요소에 텍스트가 포함되어 있으면 이 기능을 사용할 수 없습니다. 따라서 텍스트를 추가하고 싶다면 패키지가 완성된 후에 추가해야 합니다.

예: 대상 요소를 래핑하는 데 사용되는 DOM 요소

<p class="container">
 <p class="inner">Hello</p>
 <p class="inner">Goodbye</p>
</p>
$('.inner').wrap(function() {
 return '<p class="&#39; + $(this).text() + &#39;" />';
});
<p class="container">
 <p class="Hello">
  <p class="inner">Hello</p>
 </p>
 <p class="Goodbye">
  <p class="inner">Goodbye</p>
 </p>
</p>

unwrap(): 이 메서드는 요소의 상위 요소를 제거합니다. 이렇게 하면 .wrap() 메서드의 효과가 빠르게 취소될 수 있습니다. 일치하는 요소(및 그 형제)는 DOM 구조에서 상위 요소를 대체합니다.

예: 각 단락을 ID가 "content"인 p로 묶습니다.

<p>
  <p>Hello</p>
  <p>cruel</p>
  <p>World</p>
</p>
$("p").unwrap()
<p>Hello</p>
<p>cruel</p>
<p>World</p>

wrapAll(): 일치하는 모든 요소를 단일 요소로 묶습니다

이것은 '.wrap()'는 다르며 '.wrap()'은 일치하는 각 요소를 한 번 래핑합니다. 이러한 종류의 래핑은 원본 문서의 의미 품질을 손상시키지 않고 문서에 구조화된 추가 마크업을 삽입하는 데 가장 유용합니다. 이 함수의 원리는 제공된 첫 번째 요소를 검사하고 해당 코드 구조에서 최상위 상위 요소를 찾는 것입니다. 이 상위 요소는 래핑 요소입니다.

예: 모든 단락을 생성된 p로 래핑

$("p").wrapAll("<p></p>");

또는

$("p").wrapAll(document.createElement("p"));

jQuery의 DOM 노드 작업 방법 요약

관련 기사