한 DIV 요소를 다른 DIV 요소로 이동하고 싶습니다. 예를 들어 다음과 같이 이동하고 싶습니다(모든 자식 포함).
<div id="source"> ... </div>이것으로:
<div id="destination"> ... </div>내가 이것을 가질 수 있도록 :
<div id="destination"> <div id="source"> ... </div> </div>반응형
질문자 :Mark Richman
(요소의 끝에 추가 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>Andrew Hare
내 솔루션:
이동하다:
jQuery("#NodesToMove").detach().appendTo('#DestinationContainerNode')복사:
jQuery("#NodesToMove").appendTo('#DestinationContainerNode').detach() 사용에 유의하십시오. 복사 시 아이디가 중복되지 않도록 주의하시기 바랍니다.
Alejandro Illecas
JavaScript 솔루션은 어떻습니까?
// Declare a fragment: var fragment = document.createDocumentFragment(); // Append desired element to the fragment: fragment.appendChild(document.getElementById('source')); // Append fragment to desired element: document.getElementById('destination').appendChild(fragment);Ali Bassam
kjc26ster
일반 JavaScript를 사용해 본 적이 있습니다... 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>Bekim Bacaj
div 내부에 콘텐츠가 있고 요소가 기본 콘텐츠 뒤에 표시되도록 하려는 경우:
$("#destination").append($("#source")); div 내부에 콘텐츠가 있고 기본 콘텐츠 앞에 요소를 표시하려는 경우:
$("#destination").prepend($("#source")); 요소를 넣으 div 가 비어 있거나 완전히 바꾸려는 경우:
$("#element").html('<div id="source">...</div>');위 항목보다 먼저 요소를 복제하려면 다음을 수행하십시오.
$("#destination").append($("#source").clone()); // etc.Community Wiki
당신이 사용할 수있는:
다음에 삽입하려면,
jQuery("#source").insertAfter("#destination");다른 요소 내부에 삽입하려면
jQuery("#source").appendTo("#destination");Subrahmanyam
요소를 이동하는 방법에 대한 빠른 데모와 자세한 내용을 보려면 다음 링크를 시도하십시오.
http://html-tuts.com/move-div-in-another-div-with-jquery
다음은 짧은 예입니다.
요소 위로 이동하려면:
$('.whatToMove').insertBefore('.whereToMove');요소 뒤를 이동하려면:
$('.whatToMove').insertAfter('.whereToMove');요소 내부로 이동하려면 해당 컨테이너 내부의 모든 요소 위에:
$('.whatToMove').prependTo('.whereToMove');요소 내부로 이동하려면 해당 컨테이너 내부의 모든 요소 이후:
$('.whatToMove').appendTo('.whereToMove');Dan
다음 코드를 사용하여 소스를 대상으로 이동할 수 있습니다.
jQuery("#source") .detach() .appendTo('#destination');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>Subodh Ghulaxe
오래된 질문이지만 모든 이벤트 리스너를 포함하여 한 컨테이너에서 다른 컨테이너로 콘텐츠를 이동해야 하기 때문에 여기에 왔습니다.
jQuery에는 방법이 없지만 표준 DOM 함수인 appendChild에는 있습니다.
//assuming only one .source and one .target $('.source').on('click',function(){console.log('I am clicked');}); $('.target')[0].appendChild($('.source')[0]);appendChild를 사용하면 .source가 제거되고 이벤트 리스너를 포함하여 대상에 배치됩니다. https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild
HMR
다음을 시도할 수도 있습니다.
$("#destination").html($("#source")) #destination 있는 모든 것을 완전히 덮어씁니다.
Tamas
insertAfter & after 또는 insertBefore & before .. 많은 DOM 요소가 있거나 MouseMove 이벤트 내에서 after() 또는 before() 를 사용해야 하는 경우 브라우저 메모리가 증가하고 다음 작업은 정말 느리게 실행됩니다.
내가 방금 경험한 해결책은 before() after() 대신 insertAfter를 사용하는 것입니다.
spetsnaz
appendChild() 메서드를 사용하여 순수 JavaScript를 사용할 수 있습니다.
appendChild() 메서드는 노드를 노드의 마지막 자식으로 추가합니다.
팁: 텍스트를 사용하여 새 단락을 생성하려면 단락에 추가하는 텍스트 노드로 텍스트를 생성한 다음 문서에 단락을 추가하는 것을 잊지 마십시오.
이 방법을 사용하여 한 요소에서 다른 요소로 요소를 이동할 수도 있습니다.
팁: insertBefore() 메서드를 사용하여 지정된 기존 자식 노드 앞에 새 자식 노드를 삽입합니다.
따라서 작업을 수행하기 위해 그렇게 할 수 있습니다. 이것은 appendChild() 사용하여 귀하를 위해 만든 것입니다. 실행하고 귀하의 경우에 어떻게 작동하는지 확인하십시오.
function appendIt() { var source = document.getElementById("source"); document.getElementById("destination").appendChild(source); } #source { color: white; background: green; padding: 4px 8px; } #destination { color: white; background: red; padding: 4px 8px; } button { margin-top: 20px; } <div id="source"> <p>Source</p> </div> <div id="destination"> <p>Destination</p> </div> <button onclick="appendIt()">Move Element</button>Alireza
Bekim Bacaj 답변 의 더티 크기 개선
div { border: 1px solid ; margin: 5px } <div id="source" onclick="destination.appendChild(this)">click me</div> <div id="destination" >...</div>Kamil Kiełczewski
완전성을 기하기 위해 이 기사 에서 언급한 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.
RayLuo
출처 : http:www.stackoverflow.com/questions/1279957/how-to-move-an-element-into-another-element
반응형
'etc. > StackOverFlow' 카테고리의 다른 글
| SQL Server의 LEFT JOIN 대 LEFT OUTER JOIN (0) | 2021.12.31 |
|---|---|
| 추적되지 않은 파일을 어떻게 숨기나요? (0) | 2021.12.31 |
| RegEx는 XHTML 자체 포함 태그를 제외한 열린 태그와 일치합니다. (0) | 2021.12.31 |
| RegEx는 XHTML 자체 포함 태그를 제외한 열린 태그와 일치합니다. (0) | 2021.12.31 |
| 두 Git 리포지토리를 어떻게 병합합니까? (0) | 2021.12.30 |