javascript - 위치 - 태그 만들기




어떤 요소를 다른 요소로 옮기는 방법? (9)

insertAfter와 after 또는 insertBefore & before 사이에 엄청난 메모리 누출 및 성능 차이가 있음을 발견했습니다. DOM 요소가 많거나 MouseMove 이벤트 내에서 after () 또는 before ()를 사용해야하는 경우 브라우저 메모리가 증가하고 다음 작업은 정말 느리게 실행됩니다. 필자가 경험 한 해결책은 before () 및 insertAfter () 대신 inserBefore를 사용하는 것입니다.

하나의 DIV 요소를 다른 요소 안으로 옮기고 싶습니다. 예를 들어, 저는 이것을 (모든 아이들을 포함하여) 옮기고 싶습니다 :

<div id="source">
...
</div>

이것으로 :

<div id="destination">
...
</div>

그래서 나는 이것을 가지고있다.

<div id="destination">
  <div id="source">
    ...
  </div>
</div>

간단한 데모 및 요소 이동 방법에 대한 자세한 내용은 다음 링크를 참조하십시오.

http://html-tuts.com/move-div-in-another-div-with-jquery

다음은 간단한 예입니다.

요소 위를 이동하려면 :

$('.whatToMove').insertBefore('.whereToMove');

요소 뒤에서 이동하려면 :

$('.whatToMove').insertAfter('.whereToMove');

요소 내부를 이동하려면 해당 컨테이너 내부의 모든 요소를 ​​위 :

$('.whatToMove').prependTo('.whereToMove');

요소 내부를 이동하려면 해당 컨테이너 내부의 모든 요소를 ​​AFTER합니다.

$('.whatToMove').appendTo('.whereToMove');

다음 코드를 사용하여 소스를 대상으로 이동할 수 있습니다.

 jQuery("#source")
       .detach()
       .appendTo('#destination');

codepen 작업을 시도 codepen

function move() {
 jQuery("#source")
   .detach()
   .appendTo('#destination');
}
#source{
  background-color:red;
  color: #ffffff;
  display:inline-block;
  padding:35px;
}
#destination{
  background-color:blue;
  color: #ffffff;
  display:inline-block;
  padding:50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="source">
I am source
</div>

<div id="destination">
I am destination
</div>

<button onclick="move();">Move</button>


당신이 사용할 수있는:

삽입 후,

jQuery("#source").insertAfter("#destination");

다른 요소 안에 삽입하려면,

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

시도해 볼 수도 있습니다 :

$("#destination").html($("#source"))

하지만 이것은 #destination 있는 모든 것을 완전히 덮어 씁니다.


완전을 기하기 위해이 기사 에서 언급 한 다른 접근 wrap() 또는 wrapAll() 있습니다. 그래서 OP의 질문은 이것으로 해결 될 수 있습니다 (즉, <div id="destination" /> 가 아직 존재하지 않는다고 가정 할 때, 다음 접근법은 처음부터 그러한 래퍼를 생성합니다 - OP는 래퍼 이미 존재하거나 존재하지 않음) :

$("#source").wrap('<div id="destination" />')
// or
$(".source").wrapAll('<div id="destination" />')

그것은 유망한 것으로 들립니다. 그러나, 다음과 같이 여러 개의 중첩 구조에 $("[id^=row]").wrapAll("<fieldset></fieldset>")

<div id="row1">
    <label>Name</label>
    <input ...>
</div>

<div>...</div><input>...</input> 올바르게 래핑하지만 <label>...</label> 어느 정도 나간다. 그래서 나는 명시 적으로 $("row1").append("#a_predefined_fieldset") . 그래서, YMMV.


적 보통 자바 스크립트를 시도 ... destination.appendChild(source); ?

onclick = function(){ destination.appendChild(source); }
div{ margin: .1em; } 
#destination{ border: solid 1px red; }
#source {border: solid 1px gray; }
<!DOCTYPE html>
<html>

 <body>

  <div id="destination">
   ###
  </div>
  <div id="source">
   ***
  </div>

 </body>
</html>


appendTo 함수를 사용하여 요소의 끝에 추가 할 수 있습니다.

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

또는 요소의 시작 부분에 prependTo 함수를 사용할 수도 있습니다.

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

예:

$("#appendTo").click(function() {
  $("#moveMeIntoMain").appendTo($("#main"));
});
$("#prependTo").click(function() {
  $("#moveMeIntoMain").prependTo($("#main"));
});
#main {
  border: 2px solid blue;
  min-height: 100px;
}

.moveMeIntoMain {
  border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">main</div>
<div id="moveMeIntoMain" class="moveMeIntoMain">move me to main</div>

<button id="appendTo">appendTo main</button>
<button id="prependTo">prependTo main</button>


JavaScript 솔루션은 어떻습니까?

조각 선언 :

var fragment = document.createDocumentFragment();

원하는 요소를 조각에 추가합니다.

fragment.appendChild(document.getElementById('source'));

원하는 요소에 단편을 추가하십시오.

document.getElementById('destination').appendChild(fragment);

확인 해봐.





html