javascript - the - w3schools html reference pdf




كيفية نقل عنصر إلى عنصر آخر؟ (8)

أرغب في نقل عنصر DIV واحد داخل آخر. على سبيل المثال ، أريد نقل هذا (بما في ذلك جميع الأطفال):

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

في هذا:

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

بحيث يكون لدي هذا:

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

إذا كان div الذي تريد وضع العنصر فيه يحتوي على محتوى ، وتريد أن يظهر العنصر بعد المحتوى الرئيسي:

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

إذا كان div الذي تريد وضع العنصر به محتوى داخليا ، وتريد عرض العنصر قبل المحتوى الرئيسي:

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

إذا كان div الذي تريد وضع العنصر فيه فارغًا ، أو كنت تريد استبداله تمامًا:

$("#element").html('<div id="source">...</div>');

إذا كنت ترغب في تكرار عنصر قبل أي من العناصر أعلاه:

$("#destination").append($("#source").clone());
// etc.

إذا كنت تريد عرضًا توضيحيًا سريعًا والمزيد من التفاصيل حول كيفية نقل العناصر ، فجرّب هذا الرابط:

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

هنا مثال قصير:

لنقل عنصر ABOVE:

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

للانتقال بعد عنصر:

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

للتنقل داخل عنصر ، انقر فوق كل العناصر الموجودة داخل الحاوية:

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

للتنقل داخل عنصر ، بعد كل العناصر داخل تلك الحاوية:

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

بلدي الحل:

نقل:

jQuery("#NodesToMove").detach().appendTo('#DestinationContainerNode')

نسخ:

jQuery("#NodesToMove").appendTo('#DestinationContainerNode')

لاحظ استخدام .detach (). عند النسخ ، كن حذرًا أنك لا تقوم بتكرار المعرفات.


حاول جافة جافا سكريبت ... 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>


لاحظت وجود تسرب للذاكرة كبير وفرق في الأداء بين insertAfter & after أو insertBefore & before .. إذا كان لديك العديد من عناصر DOM ، أو تحتاج إلى استخدام بعد () أو قبل () داخل حدث MouseMove ، فمن المحتمل أن تزيد ذاكرة المستعرض سوف تعمل العمليات القادمة بطيئة حقا. الحل الذي واجهته للتو هو استخدام inserBefore بدلاً من ذلك قبل () و insertAfter بدلاً من ذلك بعد ().



يمكنك أيضًا تجربة:

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

ولكن هذا سيؤدي إلى استبدال أي شيء #destination في #destination .


يمكنك استخدام التعليمات البرمجية التالية لنقل المصدر إلى الوجهة

 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>





html