Saya ingin memindahkan satu elemen DIV di dalam yang lain. Misalnya, saya ingin pindah ini (termasuk semua anak-anak):
<div id="source">
...
</div>
menjadi seperti ini:
<div id="destination">
...
</div>
jadi yang saya miliki ini:
<div id="destination">
<div id="source">
...
</div>
</div>
Anda mungkin ingin menggunakan appendTo
fungsi (yang menambahkan ke akhir dari elemen):
$("#source").appendTo("#destination");
Sebagai alternatif, anda bisa menggunakan prependTo
fungsi (yang menambah awal dari elemen):
$("#source").prependTo("#destination");
Contoh:
$("#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>
solusi saya:
BERGERAK:
jQuery("#NodesToMove").detach().appendTo('#DestinationContainerNode')
COPY:
jQuery("#NodesToMove").appendTo('#DestinationContainerNode')
Catatan penggunaan .detach(). Ketika menyalin, berhati-hati bahwa anda tidak duplikasi Id.
Jika div
di mana anda ingin menempatkan elemen memiliki isi di dalamnya, dan anda ingin elemen untuk acara setelah kandungan utama:
$("#destination").append($("#source"));
Jika div
di mana anda ingin menempatkan elemen memiliki isi di dalamnya, dan anda ingin menunjukkan elemen sebelum kandungan utama:
$("#destination").prepend($("#source"));
Jika div
di mana anda ingin menempatkan elemen anda adalah kosong, atau anda ingin ganti seluruhnya:
$("#element").html('<div id="source">...</div>');
Jika anda ingin menduplikasi sebuah elemen sebelum kode di atas:
$("#destination").append($("#source").clone());
// etc.
Bagaimana JavaScript solusi?
Menyatakan sebuah fragmen:
var fragmen = dokumen.createDocumentFragment();
Menambahkan elemen yang diinginkan ke fragmen:
fragmen.appendChild(document.getElementById('sumber'));
Menambahkan fragmen yang diinginkan elemen:
dokumen.getElementById('tujuan').appendChild(fragmen);
[Check it out.][1]
Pernah mencoba polos JavaScript... tujuan.appendChild(sumber);
?
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>
Jika anda ingin demo cepat dan rincian lebih lanjut tentang bagaimana anda memindahkan elemen, coba link ini:
http://html-tuts.com/move-div-in-another-div-with-jquery
Berikut adalah contoh singkat:
Untuk bergerak di ATAS unsur:
$('.whatToMove').insertBefore('.whereToMove');
Untuk bergerak SETELAH unsur:
$('.whatToMove').insertAfter('.whereToMove');
Untuk bergerak di dalam sebuah elemen, di ATAS SEMUA elemen di dalam wadah:
$('.whatToMove').prependTo('.whereToMove');
Untuk bergerak di dalam sebuah elemen, SETELAH SEMUA elemen di dalam wadah:
$('.whatToMove').appendTo('.whereToMove');
Anda dapat menggunakan kode berikut untuk memindahkan sumber ke tujuan
jQuery("#source")
.detach()
.appendTo('#destination');
cobalah bekerja 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>
Pertanyaan lama tapi sampai di sini karena saya perlu untuk memindahkan konten dari satu wadah ke wadah lain termasuk semua acara pendengar.
jQuery doesn't memiliki cara untuk melakukannya tetapi standar DOM fungsi appendChild tidak.
//assuming only one .source and one .target
$('.source').on('click',function(){console.log('I am clicked');});
$('.target')[0].appendChild($('.source')[0]);
Menggunakan appendChild menghilangkan .sumber dan tempat-tempat yang menjadi target seperti itu's acara pendengar: https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild
Saya melihat memori yang besar kebocoran & perbedaan kinerja antara insertAfter
& setelah
atau insertBefore
& sebelum
.. Jika anda memiliki ton dari elemen DOM, atau anda perlu menggunakan setelah()
atau sebelum()
dalam MouseMove event, browser memori akan meningkat dan selanjutnya operasi akan berjalan sangat lambat.
Solusi saya've hanya dialami adalah dengan menggunakan inserBefore bukan sebelum()
dan insertAfter bukan setelah()
.
Anda dapat menggunakan pure JavaScript, menggunakan appendChild()
metode...
appendChild() metode ini akan menambahkan sebuah node sebagai anak terakhir dari sebuah node.
Tip: Jika anda ingin membuat paragraf baru, dengan teks, ingat untuk membuat teks sebagai Teks node yang anda tambahkan ke paragraf, kemudian menambahkan paragraf untuk dokumen.
Anda juga dapat menggunakan metode ini untuk memindahkan elemen dari satu unsur ke unsur lain.
Tip: Gunakan insertBefore() metode untuk menyisipkan node anak sebelum ditentukan, yang ada, node anak.
Jadi anda bisa melakukan itu untuk melakukan pekerjaan itu, ini adalah apa yang saya dibuat untuk anda, menggunakan appendChild()
, berlari dan melihat bagaimana hal itu bekerja untuk kasus anda:
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>
Demi kelengkapan, ada pendekatan lain bungkus()
atau wrapAll()
yang disebutkan dalam artikel ini. Jadi OP's pertanyaan mungkin bisa diselesaikan oleh ini (yaitu, dengan asumsi <div id="tujuan" />
belum ada, pendekatan berikut akan membuat semacam pembungkus dari awal - OP tidak jelas tentang apakah bungkusnya sudah ada atau tidak):
$("#source").wrap('<div id="destination" />')
// or
$(".source").wrapAll('<div id="destination" />')
Ini terdengar menjanjikan. Namun, ketika saya mencoba untuk melakukan $("[id^=row]").wrapAll("<fieldset></fieldset>")
pada beberapa bersarang struktur seperti ini:
<div id="row1">
<label>Name</label>
<input ...>
</div>
Itu benar membungkus mereka <div>...</div>
dan <input>...< input>
TAPI ENTAH kenapa DAUN <label>...</label>
. Jadi saya akhirnya menggunakan eksplisit $("row1").append("#a_predefined_fieldset")
sebagai gantinya. Jadi, YMMV.