jQuery를 사용하여 자식 요소를 부모에서 다른 부모 요소로 옮기는 방법
이 질문에는 이미 답변이 있습니다.
- 요소를 다른 요소로 옮기는 방법? 답변 14 개
jQuery DataTables 플러그인을 사용하고 있습니다. 검색 상자 (.dataTables_filter) 및 레코드 수를 등록 된 자바 스크립트 동작을 잃지 않고 부모 요소 (.dataTables_wrapper)에서 내 페이지의 다른 div로 드롭 다운 (.dataTables_length)을 표시하고 싶습니다. 예를 들어 검색 상자에는 'keyup'이벤트에 첨부 된 기능이 있으며 그대로 유지하고 싶습니다.
DOM은 다음과 같습니다.
<body>
<div id="parent1">
<div class="dataTables_wrapper" id="table1_wrapper">
<div class="dataTables_length" id="table1_length">
<select size="1" name="table1_length">
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</div>
<div class="dataTables_filter" id="table1_filter">
<input type="text" class="search">
</div>
<table id="table1">
...
</table>
</div>
</div>
<div id="parent2">
<ul>
<li><a href="#">Link A</a></li>
<li><a href="#">Link B</a></li>
<li><a href="#">Link C</a></li>
</ul>
</div>
</body>
이것이 이동 후 DOM이 보이기를 원하는 것입니다.
<body>
<div id="parent1">
<div class="dataTables_wrapper" id="table1_wrapper">
<table id="table1">
...
</table>
</div>
</div>
<div id="parent2">
<div class="dataTables_filter" id="table1_filter">
<input type="text" class="search">
</div>
<div class="dataTables_length" id="table1_length">
<select size="1" name="table1_length">
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</div>
<ul>
<li><a href="#">Link A</a></li>
<li><a href="#">Link B</a></li>
<li><a href="#">Link C</a></li>
</ul>
</div>
</body>
I've been looking at the .append(), .appendTo(), .prepend() and .prependTo() functions but haven't had any luck with these in practice. I've also looked at the .parent() and .parents() functions, but can't seem to code a workable solution. I have also considered changing the CSS so that the elements are absolutely positioned - but to be frank the page is setup with fluid elements all over, and I really want these elements to be floated in their new parents.
Any help with this is much appreciated.
$('#parent2').prepend($('#table1_length')).prepend($('#table1_filter'));
doesn't work for you? I think it should...
As Jage's answer removes the element completely, including event handlers and data, I'm adding a simple solution that doesn't do that, thanks to the detach function.
var element = $('#childNode').detach();
$('#parentNode').append(element);
Edit:
Igor Mukhin suggested an even shorter version in the comments below:
$("#childNode").detach().appendTo("#parentNode");
Detach is unnecessary.
The answer (as of 2013) is simple:
$('#parentNode').append($('#childNode'));
According to http://api.jquery.com/append/
You can also select an element on the page and insert it into another:
$('.container').append($('h2'));
If an element selected this way is inserted into a single location elsewhere in the DOM, it will be moved into the target (not cloned).
Based on the answers provided, I decided to make a quick plugin to do this:
(function($){
$.fn.moveTo = function(selector){
return this.each(function(){
var cl = $(this).clone();
$(cl).appendTo(selector);
$(this).remove();
});
};
})(jQuery);
Usage:
$('#nodeToMove').moveTo('#newParent');
'programing tip' 카테고리의 다른 글
| SQLAlchemy 기본 DateTime (0) | 2020.06.30 |
|---|---|
| Android : android.content.res.Resources $ NotFoundException : 문자열 리소스 ID # 0x5 (0) | 2020.06.30 |
| NSInteger를 NSString 데이터 유형으로 어떻게 변환합니까? (0) | 2020.06.30 |
| 'new'를 사용하면 왜 메모리 누수가 발생합니까? (0) | 2020.06.30 |
| 왜 누군가가 unorder_set 대신 set을 사용합니까? (0) | 2020.06.30 |