මූලද්‍රව්‍යයක් වෙනත් මූලද්‍රව්‍යයකට ගෙන යන්නේ කෙසේද?

1705

එක් DIV අංගයක් තවත් එකක් තුළට ගෙන යාමට මම කැමතියි. උදාහරණයක් ලෙස, මට මෙය ගෙනයාමට අවශ්‍යයි (සියලුම දරුවන් ඇතුළුව):

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

මේ සඳහා:

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

ඒ නිසා මට මෙය තිබේ:

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

javascript jquery html

— මාර්ක් රිච්මන්
source

21

$ (Target_element) භාවිතා කරන්න .අපෙන්ඩ් (to_be_insert_element);

— මොහොමඩ් අරීබ් සිද්දිකි

2

හෝ: destination.appendChild (මූලාශ්‍රය) සරල ජාවාස්ක්‍රිප්ට් භාවිතා කරමින්

— luke

CSS භාවිතයෙන් අපට මෙය සාක්ෂාත් කරගත හැකිද? එය කළ හැකිද?

— රාජ්කුමාර් සමලා

6

AjRajKumarSamala CSS හට HTML හි ව්‍යුහය වෙනස් කළ නොහැක, එහි ඉදිරිපත් කිරීම පමණි.

— මාර්ක් රිච්මන්

49

සරල ජාවාස්ක්‍රිප්ට් කවදා හෝ උත්සාහ කර 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

* යමෙකු ඩිමෝ ස්නිපටයේ ගෝලීය සිදුවීම ඔහුගේ / ඇයගේ තනතුර වැඩි දියුණු කිරීමට ගත් උත්සාහයේ onclickමූලික පදය සමඟ පෙරවදනක් කර ඇත var- නමුත් එය වැරදිය!

— බෙකිම් බකාජ්

8

JQuery ජාවාස්ක්‍රිප්ට් වලට සමාන යැයි මිනිසුන් තවමත් සිතන ආකාරය පුදුම සහගතය. 2017 දී තවදුරටත් jQuery අවශ්‍ය නොවේ.

— nkkollaw

2

2017 දී jquery අවශ්‍ය නොවන නමුත් සමහර විට එය සෑම ව්‍යාපෘතියකදීම ඔබ නැවත නැවතත් කරන කාර්යයන් සඳහා සැහැල්ලු හා සමාන යමක් භාවිතා කිරීමට උපකාරී වේ. Document.ready, window.load සිදුවීම් හරස් බ්‍රව්සර් හිතකාමී ආකාරයකින් සවන් දීමට පහසු ක්‍රමයක් ලෙස මම මුදල්-ඩොම් භාවිතා කරමි. පහසු පීසි.

— eballeste

1

පිළිගත් පිළිතුරට මෙය වෙනස් කිරීම, දැන් එය 2020 වේ :)

— මාර්ක් රිච්මන්

1

JQuery ජාවාස්ක්‍රිප්ට් වලට සමාන යැයි මිනිසුන් තවමත් සිතන ආකාරය පුදුම සහගතය. 2020 දී තවදුරටත් jQuery අවශ්‍ය නොවේ.

— ii iml0sto1

1805

ඔබට 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>

ස්නිපටය පුළුල් කරන්න

— ඇන්ඩ rew හාරේ
source

23

මෙය jQuery ජංගම දුරකථනයේ නිවැරදිව ක්‍රියා නොකරනු ඇති බවට අනතුරු ඇඟවීමක් වන අතර, ඒ වෙනුවට මූලද්‍රව්‍යයේ තවත් පිටපතක් නිර්මාණය කළ හැකිය.

— ජෝර්දාන් රයිටර්

32

AppenTo විසින් පිටපතක් නිර්මාණය කිරීමට හෝ මුළු කොටසම ගමනාන්තයට ගෙන යනවාද? (එය පිටපත් නම්, එය හඳුනාගැනීමේ අංකය මගින් div කරන විට erros නිර්මාණය වන නිසා)

51

JQuery හි මූලද්‍රව්‍ය ඉවත් කිරීම, ප්‍රතිස්ථාපනය කිරීම සහ චලනය කිරීම පිළිබඳ විශිෂ්ට ලිපියක් මෙන්න: JQuery elated.com/articles/jquery-removing-replacing-moving-elements

— xhh

42

උපග්‍රන්ථය සඳහා jQuery ප්‍රලේඛනය සැලකිල්ලට ගන්න මූලද්‍රව්‍යය ගෙන යන බව: it will be moved into the target (not cloned) and a new set consisting of the inserted element is returned- api.jquery.com/appendto

— ජෝන් කේ

15

ඔබ එය චලනය කරන්නේ නැත, එකතු කිරීම පමණි. පහත පිළිතුර නිසි ලෙස චලනය කරයි.

— ආරොන්

920

මගේ විසඳුම:

චලනය:

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

පිටපත:

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

.Detach () භාවිතය සැලකිල්ලට ගන්න. පිටපත් කිරීමේදී, ඔබ හැඳුනුම්පත් අනුපිටපත් නොකිරීමට වගබලා ගන්න.

— ඇලෙජැන්ඩ්‍රෝ ඉලෙකස්
source

86

හොඳම පිළිතුර. පිළිගත් පිළිතුර පිටපතක් සාදයි, ප්‍රශ්නය අසන ආකාරයට මූලද්‍රව්‍යය චලනය නොකරයි.

— paulscode

97

කණගාටුයි, නමුත් ඇන්ඩ rew හාරේ පිළිගත් පිළිතුර නිවැරදි ය - වෙන් කිරීම අනවශ්‍යය. ඉහත පික්සික් හි JSFiddle හි එය උත්සාහ කරන්න - ඔබ වෙන් කිරීමේ ඇමතුම් ඉවත් කළහොත් එය හරියටම ක්‍රියාත්මක වේ, එනම් එය පියවරක් ගනී, පිටපතක් නොවේ. එකම වෙනසක් සහිත දෙබලක මෙන්න: jsfiddle.net/D46y5 API හි ලේඛනගත කර ඇති පරිදි: api.jquery.com/appendTo : "මේ ආකාරයෙන් තෝරාගත් මූලද්‍රව්‍යයක් DOM හි වෙනත් ස්ථානයක තනි ස්ථානයකට ඇතුළත් කළහොත් එය ගෙන යනු ඇත. ඉලක්කයට (ක්ලෝන කර නැත) ඇතුළු කළ මූලද්‍රව්‍යයෙන් සමන්විත නව කට්ටලයක් ආපසු ලබා දෙනු ලැබේ "

— ජෝන් - අංකයක් නොවේ

8

@ ජෝන්-නොටනම්බර් හරි - වෙන් කිරීම () මෙහි අවශ්‍ය නොවේ. පිළිගත් පිළිතුර හොඳම ය, ඔබ ඇත්ත වශයෙන්ම ප්‍රලේඛනය නිසියාකාරව කියවිය යුතුය.

— ලෙනාඩ් චලිස්

11

AppendTo ප්‍රලේඛනයෙහි ද මෙසේ සඳහන් වේ: "කෙසේ වෙතත්, ඉලක්කගත මූලද්‍රව්‍ය එකකට වඩා තිබේ නම්, පළමු ඉලක්කයෙන් පසුව එක් එක් ඉලක්කය සඳහා ඇතුළත් කළ මූලද්‍රව්‍යයේ ක්ලෝන කරන ලද පිටපත් නිර්මාණය වනු ඇති අතර එම නව කට්ටලය (මුල් මූලද්‍රව්‍යය සහ ක්ලෝන) ආපසු ලබා දෙනු ලැබේ." එබැවින් පොදුවේ ගත් කල, මෙම විසඳුම මගින් පිටපත් ද නිර්මාණය කළ හැකිය!

— වින්සන්ට් පැසලර්

මහා! නැතහොත් ඔබට මෙය යා යුත්තේ කොතැනටද යන්න වඩාත් නිශ්චිතව දැක්වීමට භාවිතා කළ හැකිය$('#nodeToMove').insertAfter('#insertAfterThisElement');

— වික්ටර් ඔගස්ටෝ

109

මම දැන් භාවිතා කළේ:

$('#source').prependTo('#destination');

මම මෙතනින් අල්ලා ගත්තා .

— kjc26ster
source

7

හොඳයි, ඔබට මූලද්‍රව්‍යය තදින් අල්ලාගෙන පසුව එය නැවත ඇතුළත් කිරීමට අවශ්‍ය විට වෙන් කිරීම ප්‍රයෝජනවත් වේ, නමුත් ඔබේ උදාහරණයේ දී ඔබ එය කෙසේ හෝ ක්ෂණිකව නැවත ඇතුල් කරයි.

— ටිම් බෙත්

1

මම බයවෙලා ඉන්නේ ඔයා මොනවද කරන්නේ කියලා, මට නියැදි කේතයක් දෙන්න පුළුවන්ද?

— kjc26ster

1

මම අදහස් කළේ, prependTo, මූලද්‍රව්‍යය එහි මුල් ස්ථානයෙන් වෙන් කර එය නව එකක් තුළට ඇතුළු කරයි. අනෙක් අතට වෙන් කිරීමේ ශ්‍රිතය තෝරාගත් මූලද්‍රව්‍යය හඳුනාගන්නා අතර ඔබට එය විචල්‍යයකින් සුරැකිය හැකි අතර එය පසුකාලීනව DOM තුළට ඇතුළු කළ හැකිය. කාරණය නම්, ඔබගේ වෙන් කිරීමේ ඇමතුම අනවශ්‍යය. එය ඉවත් කරන්න, එවිට ඔබට එකම බලපෑමක් ලැබෙනු ඇත.

— ටිම් බෙත්

1

සංස්කරණයන් මෙම පිළිතුර මුළුමනින්ම වෙනස් කර වසරකට පසුව තවත් පිළිතුරක් එකතු කර ඇති බව විශ්වාස කළ

— නොහැකි තරම්ය

100

ජාවාස්ක්‍රිප්ට් විසඳුමක් ගැන කුමක් කිව හැකිද?

// 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);

එය පරික්ෂා කරන්න.

— අලි බාසම්
source

8

හුදෙක් document.getElementById ('ගමනාන්තය') වෙනුවට createDocumentFragment භාවිතා කරන්නේ ඇයි? AppendChild (document.getElementById ('source'))?

— ගුණර් ජෙස්නර්

6

@ GunarC.Gessner ඔබ ගමනාන්ත වස්තුවට එකතු කිරීමට පෙර ප්‍රභව වස්තුව වෙනස් කළ යුතු යැයි උපකල්පනය කරයි, එවිට හොඳම ප්‍රවේශය වන්නේ මන inary කල්පිත වස්තුවක් වන DOM ගසෙහි කොටසක් නොවන කැබැල්ල භාවිතා කිරීමයි, වෙනස් කිරීමේදී ඔබට වඩා හොඳ කාර්ය සාධනයක් ලැබේ. ප්‍රභව වස්තුව එය එකතු කිරීමට පෙර එහි ආරම්භක ස්ථානයේ වෙනස් කිරීමට වඩා එහි මුල් ස්ථානයෙන් (දැන් එය කැබැල්ල ඇතුළත) සංක්‍රමණය වූ විට.

— අලි බාසම්

5

ජාවාස්ක්‍රිප්ට් පිරිසිදු විසඳුමක් ලබා දීමේ අදාළත්වය සඳහා මට එකතු කිරීමට අවශ්‍යයි.

— JQuery

1

ප්‍රශ්නය: ළමා නෝඩය එකතු කිරීමේදී, අමුණා ඇති සිදුවීම් අපට අහිමි වේද?

— ජිමසුන්

1

මගේම ප්‍රශ්නයට පිළිතුර ඔව්, එය අමුණා ඇති සිදුවීම් තබා ගනී.

— ජිමසුන්

95

නම් divඔබ ඔබේ අංගයක් දැමීමට අවශ්ය තැනට අන්තර්ගතයට තුල ඇති අතර, ඔබ අංගයක් පෙන්වන්න ඕන පසුව ප්රධාන අන්තර්ගතයට:

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

නම් divඔබ ඔබේ අංගයක් දැමීමට අවශ්ය තැනට අන්තර්ගතයට තුල ඇති අතර, ඔබ අංගයක් පෙන්වන්න ඕන පෙර ප්රධාන අන්තර්ගතයට:

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

නම් divඔබ ඔබේ අංගයක් හිස් දැමීමට අවශ්ය තැනට නම්, හෝ ඔබ විසින් අවශ්ය වෙනුවට එය සම්පූර්ණයෙන්ම:

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

ඉහත ඕනෑම දෙයකට පෙර ඔබට මූලද්‍රව්‍යයක් අනුපිටපත් කිරීමට අවශ්‍ය නම්:

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

— sbaaaang
source

මම සියලු තද අකුරු කියවීමට ටිකක් අමාරුයි, නමුත් මෙය වඩාත්ම තොරතුරු සහිත පිළිතුරයි, එබැවින් එය මගේ අභිවෘද්ධිය ලබා ගනී.

— මයිකල් ෂෙපර්

34

ඔයාට පාවිච්චි කරන්න පුළුවන්:

පසුව ඇතුළු කිරීමට,

jQuery("#source").insertAfter("#destination");

වෙනත් අංගයක් තුළට ඇතුළු කිරීමට,

jQuery("#source").appendTo("#destination");

— සුබ්‍රමනියම්
source

20

ඔබට ඉක්මන් නිරූපණයක් සහ ඔබ අංග චලනය කරන්නේ කෙසේද යන්න පිළිබඳ වැඩි විස්තර අවශ්‍ය නම්, මෙම සබැඳිය උත්සාහ කරන්න:

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

මෙන්න කෙටි උදාහරණයක්:

මූලද්රව්යයක් ඉහළට ගෙනයාමට:

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

මූලද්‍රව්‍යයක් පසු ගෙනයාමට:

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

මූලද්රව්යයක් තුළට ගමන් කිරීම සඳහා, එම භාජනය තුළ ඇති සියලුම මූලද්රව්යවලට ඉහළින්:

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

මූලද්රව්යයක් තුළට ගමන් කිරීම සඳහා, එම භාජනය තුළ ඇති සියලුම මූලද්රව්ය පසු:

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

— ඩෑන්
source

19

ප්‍රභවය ගමනාන්තයට ගෙනයාමට ඔබට පහත කේතය භාවිතා කළ හැකිය

 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>

ස්නිපටය පුළුල් කරන්න

— සුබෝද් ගුලාක්ස්
source

11

පැරණි ප්‍රශ්නය නමුත් මෙහි පැමිණියේ මට සියලු සිදුවීම් අසන්නන් ද ඇතුළුව එක් බහාලුමක සිට තවත් භාජනයකට අන්තර්ගතය ගෙනයාමට අවශ්‍ය බැවිනි .

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

— එච්.එම්.ආර්
source

6

ඔබට ද උත්සාහ කළ හැකිය:

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

නමුත් මෙය ඔබ සතුව ඇති ඕනෑම දෙයක් සම්පූර්ණයෙන්ම නැවත ලියයි #destination.

— ටමාස්
source

2

ගෙන ගිය අංගයේ සිදුවීම් සවන්දෙන්නන් බිඳ දමන්න.

— ඊගෝර් පොමරන්ස්කි

4

insertAfter& afterහෝ insertBefore& අතර විශාල මතක කාන්දු beforeවීමක් සහ කාර්යසාධන වෙනසක් මා දුටුවා . ඔබට ඩොම් මූලද්‍රව්‍ය ටොන් ගණනක් තිබේ නම්, හෝ ඔබට මවුස්මෝව් සිදුවීමක් භාවිතා කිරීමට after()හෝ before()ඇතුළත අවශ්‍ය නම් , බ්‍රව්සරයේ මතකය වැඩි වනු ඇති අතර ඊළඟ මෙහෙයුම් ඉතා මන්දගාමීව ක්‍රියාත්මක වේ.

මා දැන් අත්විඳ ඇති විසඳුම නම් ඒ වෙනුවට before()ඇතුළු කිරීම සහ ඉන් පසුව ඇතුල් කිරීම ය after().

— spetsnaz
source

මෙය ජාවාස්ක්‍රිප්ට් එන්ජින් ක්‍රියාත්මක කිරීම මත රඳා පවතින ගැටළුවක් සේ පෙනේ. කුමන බ්‍රව්සර් අනුවාදය සහ JS එන්ජිම ඔබ මෙය දකින්නේ?

— මාර්ක් රිච්මන්

1

මම Chrome අනුවාදය 36.0.1985.125 හි සිටින අතර jQuery v1.11.1 භාවිතා කරමි. මූසිකය ඉවර වූ මූලද්‍රව්‍යය පහළට හෝ ඉහළට ගෙනයාමට සරල ඩීඅයිවී එකක් ගෙන යන මූසික චලනය මත මම ශ්‍රිතයක් බැඳ තබමි. එමනිසා, ඔබ ඔබේ කර්සරය ඇදගෙන යන අතරතුර මෙම සිදුවීම සහ ක්‍රියාකාරිත්වය ක්‍රියාත්මක වේ. (30) + සඳහා ඔබ ඔබේ කර්සරය ගෙන ගියහොත් () සහ ඊට පෙර () සමඟ මතක කාන්දු වීම සිදු වන අතර, ඒ වෙනුවට මම ඇතුළු කරන්න සහ ඉන්සර්ට් භාවිතා කළහොත් එය අතුරුදහන් වේ.

— spetsnaz

1

මම ගූගල් සමඟ දෝෂයක් විවෘත කරමි.

— මාර්ක් රිච්මන්

2

ඔබට පිරිසිදු ජාවාස්ක්‍රිප්ට් භාවිතා කළ හැකිය, appendChild()ක්‍රමවේදය භාවිතා කරමින් ...

AppendChild () ක්‍රමය මඟින් නෝඩයක අවසාන දරුවා ලෙස නෝඩයක් එකතු කරයි.

ඉඟිය: ඔබට පෙළක් සමඟ නව ඡේදයක් නිර්මාණය කිරීමට අවශ්‍ය නම්, ඔබ ඡේදයට එකතු කරන පෙළ නෝඩයක් ලෙස පෙළ නිර්මාණය කිරීමට මතක තබා ගන්න, ඉන්පසු ඡේදය ලේඛනයට එකතු කරන්න.

මූලද්‍රව්‍යයක් එක් මූලද්‍රව්‍යයකින් තවත් මූලද්‍රව්‍යයකට ගෙනයාමට ඔබට මෙම ක්‍රමය භාවිතා කළ හැකිය.

ඉඟිය: නිශ්චිත, පවතින, ළමා නෝඩයකට පෙර නව ළමා නෝඩයක් ඇතුළත් කිරීමට ඇතුළු කිරීමේ පෙර () ක්‍රමය භාවිතා කරන්න.

එම නිසා ඔබට එම කාර්යය කිරීමට එය කළ හැකිය, මෙය මම ඔබ වෙනුවෙන් නිර්මාණය කළ, භාවිතා කිරීම 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>

ස්නිපටය පුළුල් කරන්න

— අලිරේසා
source

0

සම්පූර්ණත්වය සඳහා, තවත් ප්‍රවේශයක් wrap()හෝ මෙම ලිපියේwrapAll() සඳහන් කර ඇත . එබැවින් OP හි ප්‍රශ්නය මෙයින් විසඳා ගත හැකිය (එනම්, තවමත් නොපවතින බව උපකල්පනය කරමින් , පහත දැක්වෙන ප්‍රවේශය මුල සිටම එවැනි ආවරණයක් නිර්මාණය කරනු ඇත - එතීෙම් දැනටමත් තිබේද නැද්ද යන්න පිළිබඳව OP පැහැදිලි නැත):<div id="destination" />

$("#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")ඒ වෙනුවට පැහැදිලිව භාවිතා කළා. ඉතින්, වයි.එම්.එම්.වී.

— රේලූ
source

0

බෙකිම් බකාජ් පිළිතුරේ අපිරිසිදු ප්‍රමාණය වැඩි දියුණු කිරීම

div { border: 1px solid ; margin: 5px }

<div id="source" onclick="destination.appendChild(this)">click me</div>
<div id="destination" >...</div>

ස්නිපටය පුළුල් කරන්න

— කමිල් කියෙව්ස්ව්ස්කි
source