요소를 다른 요소로 이동하려면 어떻게 해야 합니까?
하나의 DIV 요소를 다른 요소 안으로 옮기고 싶습니다.예를 들어, (모든 어린이를 포함) 다음을 이동합니다.
<div id="source">
...
</div>
다음과 같이 입력합니다.
<div id="destination">
...
</div>
그래서 이걸 갖게 된 거야
<div id="destination">
<div id="source">
...
</div>
</div>
(요소의 끝에 추가되는) 기능을 사용할 수 있습니다.
$("#source").appendTo("#destination");
또는 (요소의 선두에 추가되는) 함수를 사용할 수도 있습니다.
$("#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>솔루션:
이동:
jQuery("#NodesToMove").detach().appendTo('#DestinationContainerNode')
복사:
jQuery("#NodesToMove").appendTo('#DestinationContainerNode')
.detach()의 사용법에 주의해 주세요.복사할 때는 ID가 중복되지 않도록 주의하십시오.
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);
플레인 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>사용했을 뿐:
$('#source').prependTo('#destination');
내가 여기서 가져왔어
이 경우,div요소를 내부에 배치하고 요소를 기본 컨텐츠 뒤에 표시할 위치:
$("#destination").append($("#source"));
이 경우,div요소를 내부에 배치하고 기본 컨텐츠 앞에 요소를 표시할 수 있습니다.
$("#destination").prepend($("#source"));
이 경우,div요소를 비워 둘 위치 또는 요소를 완전히 바꾸려는 위치:
$("#element").html('<div id="source">...</div>');
위의 몇 가지 전에 요소를 복제하려면 다음 절차를 따릅니다.
$("#destination").append($("#source").clone());
// etc.
다음을 사용할 수 있습니다.
뒤에 삽입하려면
jQuery("#source").insertAfter("#destination");
다른 요소 내부에 삽입하려면
jQuery("#source").appendTo("#destination");
다음 코드를 사용하여 소스를 대상으로 이동할 수 있습니다.
jQuery("#source")
.detach()
.appendTo('#destination');
코드펜 작업을 시도하다
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>간단한 데모 및 요소 이동 방법에 대한 자세한 내용은 다음 링크를 참조하십시오.
http://html-tuts.com/move-div-in-another-div-with-jquery
다음으로 간단한 예를 제시하겠습니다.
요소 위로 이동하려면:
$('.whatToMove').insertBefore('.whereToMove');
요소 뒤로 이동하려면:
$('.whatToMove').insertAfter('.whereToMove');
요소 내부로 이동하려면 해당 용기 내부의 모든 요소보다 우선합니다.
$('.whatToMove').prependTo('.whereToMove');
요소 내부로 이동하려면 해당 용기 내부의 모든 요소 뒤에 다음 작업을 수행합니다.
$('.whatToMove').appendTo('.whereToMove');
오래된 질문이지만 모든 이벤트 청취자를 포함하여 한 컨테이너에서 다른 컨테이너로 콘텐츠를 이동해야 하기 때문에 여기에 왔습니다.
jQuery에는 방법이 없지만 표준 DOM 함수 append Child에는 방법이 있습니다.
//assuming only one .source and one .target
$('.source').on('click',function(){console.log('I am clicked');});
$('.target')[0].appendChild($('.source')[0]);
append Child를 사용하면 .source가 삭제되고 해당 이벤트 리스너를 포함한 타겟에 배치됩니다.https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild
다음의 조작도 가능합니다.
$("#destination").html($("#source"))
그러나 이것은 당신이 가지고 있는 모든 것을 완전히 덮어씁니다.#destination.
순수 JavaScript를 사용할 수 있습니다.appendChild()메서드...
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>insertAfter&after ★★★★★★★★★★★★★★★★★」insertBefore&before요소가 많거나 가 있는 ..DOM 요소가 너무 많거나 DOM 요소를 사용할 필요가 있는 경우after() ★★★★★★★★★★★★★★★★★」before()MouseMove 이벤트 내에서는 브라우저 메모리가 증가하여 다음 작업이 매우 느리게 실행될 수 있습니다.
대신 inserBefore를 입니다.before() 대신 insert After를 합니다.after().
Bekim Bacaj 답변의 더러운 크기 개선
div { border: 1px solid ; margin: 5px }<div id="source" onclick="destination.appendChild(this)">click me</div>
<div id="destination" >...</div> 또 .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 YMMV.
언급URL : https://stackoverflow.com/questions/1279957/how-to-move-an-element-into-another-element
'source' 카테고리의 다른 글
| 연결 배열 키 목록을 가져오는 중 (0) | 2022.10.20 |
|---|---|
| 대규모 어레이를 선언할 때 스택 오버플로 예외가 발생하는 중 (0) | 2022.10.20 |
| 예외 발생 시 JavaScript 스택트레이스를 취득하려면 어떻게 해야 하나요? (0) | 2022.10.20 |
| 한 번의 ng클릭으로 여러 기능을 추가하는 방법 (0) | 2022.10.20 |
| MySQL: SQL 쿼리에 각 결과의 레코드를 삽입하려면 어떻게 해야 합니까? (0) | 2022.10.20 |