AppendTo 및 prependTo를 사용하여 하나의 DOM 요소를 다른 DOM 요소 안에 중첩하는 방법은 무엇입니까?

DOM 요소 이동: 한 요소를 다른 요소 안에 중첩하는 방법

웹 개발에서는 DOM 구조 내에서 요소를 이동해야 하는 경우가 많습니다. , 심미적인 이유든 기능적인 이유든. 이러한 요구 사항 중 하나는 특정 DIV 요소를 다른 기존 DIV 요소로 재배치하는 것입니다.

문제:

"source"와 "destination"이라는 두 개의 DIV 요소가 있다고 가정합니다. "source"와 그 하위 요소를 "destination"으로 이동하여 "destination"의 중첩 요소가 되도록 하려고 합니다.

해결책:

AppendTo 사용:

appendTo 함수는 일반적으로 끝에 요소를 삽입하는 데 사용됩니다. 또 다른 요소. 예:

$("#source").appendTo("#destination");

이 메소드는 "대상"의 꼬리에 "소스"(내용 포함)를 추가합니다.

prependTo 사용:

또는 prependTo 함수는 다른 요소의 시작 부분에 요소를 추가합니다. 예:

$("#source").prependTo("#destination");

예:

다음 코드 조각을 고려하세요.

<div>
<pre class="brush:php;toolbar:false">$("#appendTo").click(function() {
  $("#moveMeIntoMain").appendTo($("#main"));
});
$("#prependTo").click(function() {
  $("#moveMeIntoMain").prependTo($("#main"));
});

"appendTo" 버튼이 를 누르면 "main" 끝에 "moveMeIntoMain"이 추가됩니다. "prependTo" 버튼을 클릭하면 "main"의 시작 부분에 "moveMeIntoMain"이 삽입됩니다.