jQuery에서 요소 생성 및 감싸기
태그로 감싸기 전에 문서 내에 요소를 미리 생성할 수 있습니다.
아래에 있는 단락들을 '<div></div>' 태그로 감싸 보겠습니다:
<p class="www">text</p>
<p class="www">text</p>
<p class="www">text</p>
<p>text</p>
이를 위해 document.createElement('div')를 사용하여
문서 내에 요소를 미리 생성할 수 있습니다:
$('.www').wrap(document.createElement('div'));
또는:
let div = document.createElement("div");
$('.www').wrap(div);
매개변수로는 태그 이름뿐만 아니라 '<div></div>'와 같은
구조도 전달할 수 있습니다. 이 경우 효과는 완전히 동일합니다:
$('.www').wrap('<div></div>');
HTML 코드는 다음과 같이 됩니다:
<div><p class="www">text</p></div>
<div><p class="www">text</p></div>
<div><p class="www">text</p></div>
<p>text</p>
두 번째 방법을 사용할 때는 여는 태그(이 경우 '<div>')에
어떤 속성도 쓸 수 있으며, 감싸기는 이 속성들과 함께 이루어집니다.
단락들을 zzz 클래스를 가진 div로 감싸 보겠습니다:
$('.www').wrap('<div class="zzz"></div>');
HTML 코드는 다음과 같이 됩니다:
<div class="zzz"><p class="www">text</p></div>
<div class="zzz"><p class="www">text</p></div>
<div class="zzz"><p class="www">text</p></div>
<p>text</p>
각 h3를 aaa 클래스를 가진
div로 감싸세요.
