কিভাবে একটি উপাদান অন্য উপাদান মধ্যে স্থানান্তর?

1688

আমি একটি ডিআইভি উপাদান অন্য মধ্যে সরাতে চাই। উদাহরণস্বরূপ, আমি এটি স্থানান্তর করতে চাই (সমস্ত শিশু সহ):

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

এটিতে:

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

যাতে আমি এই আছে:

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

javascript jquery html

— মার্ক রিচম্যান
সূত্র

21

কেবলমাত্র $ (টার্গেট_ইলেট) ব্যবহার করুন app

— মোহাম্মদ আরিব সিদ্দিকী

2

বা: প্লেইন জাভাস্ক্রিপ্ট ব্যবহার করে

— গন্তব্য.এপেন্ডচিল্ড

আমরা কি সিএসএস ব্যবহার করে এটি অর্জন করতে পারি? এটা কি সম্ভব?

— রাজকুমার সমালা

6

@ রাজকুমারসামালা সিএসএস এইচটিএমএলের কাঠামো পরিবর্তন করতে পারে না, কেবল এটির উপস্থাপনা।

— রিচম্যান

38

কখনও সরল জাভাস্ক্রিপ্ট চেষ্টা করেছেন ... 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>

স্নিপেট প্রসারিত করুন

— বেকিম বাচাজ
সূত্র

* কেউ পোস্টটি বাড়ানোর চেষ্টা করে কীওয়ার্ড দিয়ে ডেমো স্নিপেটের বৈশ্বিক ইভেন্টটির উপসর্গ রেখেছিলেন - তবে এটি ভুল! onclickvar

— বেকিম বাকাজ

6

লোকেরা এখনও কীভাবে jQueryটিকে জাভাস্ক্রিপ্টের সমান মনে করে এটি আশ্চর্যজনক। সত্যই, 2017 সালে আর jQuery প্রয়োজন নেই।

— nkkollaw

2

2017-তে জ্যাকোরির দরকার নেই তবে মাঝে মাঝে এটি প্রতিটি একক প্রকল্পে নিজেকে বারবার কাজ করার জন্য হালকা এবং অনুরূপ কিছু ব্যবহার করতে সহায়তা করে। আমি ডকুমেন্টের জন্য শোনার সহজ উপায় হিসাবে নগদ-ডোম ব্যবহার করি ready প্রস্তুতি, ক্রস-ব্রাউজার বান্ধব উপায়ে উইন্ডো.লোড ইভেন্টগুলি। সহজ কিছু.

— এবললেস্ট

1

এটি গৃহীত উত্তরে পরিবর্তন করা, এখন এটি 2020 :)

— মার্ক রিচম্যান

1

লোকেরা এখনও কীভাবে jQueryটিকে জাভাস্ক্রিপ্টের সমান মনে করে এটি আশ্চর্যজনক। সত্যিই, 2020-এ আর jQuery এর দরকার নেই।

— ii iml0sto1

1793

আপনি এই 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>

স্নিপেট প্রসারিত করুন

— অ্যান্ড্রু হরে
সূত্র

23

একটি সতর্কতা যে এটি jQuery মোবাইলে সঠিকভাবে কাজ করতে পারে না, কারণ এটি পরিবর্তে উপাদানটির আরও একটি অনুলিপি তৈরি করতে পারে।

— জর্ডান রিটার

32

অ্যাপেনটি কি কোনও অনুলিপি তৈরি করে বা পুরো ডিভকে গন্তব্যে নিয়ে যায়? (কারণ এটি যদি অনুলিপি করে থাকে তবে আইডির মাধ্যমে

50

এখানে jQuery এ এলিমেন্টগুলি সরানো, প্রতিস্থাপন এবং স্থানান্তর সম্পর্কে একটি দুর্দান্ত নিবন্ধটি রয়েছে: এলিটেড

— জকিউরি-

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

আপনি এটি সরান না, কেবল সংযোজন। উত্তরের নীচে একটি যথাযথ সরান।

— অ্যারন

913

আমার সমাধান:

সরান:

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

অনুলিপি:

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

.Detach () এর ব্যবহারটি লক্ষ্য করুন। অনুলিপি করার সময়, সতর্কতা অবলম্বন করুন যে আপনি আইডি সদৃশ করছেন না।

— আলেজান্দ্রো ইলিকাস
সূত্র

86

সেরা উত্তর. স্বীকৃত উত্তর একটি অনুলিপি তৈরি করে, প্রশ্নটির অনুরূপ উপাদানকে সরায় না।

— পলস্কোড

97

দুঃখিত, তবে অ্যান্ড্রু হেরের গৃহীত উত্তরটি সঠিক - বিচ্ছিন্নতা অপ্রয়োজনীয়। উপরের পিক্সিকের জেএসফিডেলে এটি ব্যবহার করে দেখুন - আপনি যদি বিচ্ছিন্ন কলগুলি সরিয়ে ফেলেন তবে এটি ঠিক একইরকম কাজ করে, অর্থাত্ এটি নড়াচড়া করে, কোনও অনুলিপি নয়। এখানে কেবলমাত্র একটি পরিবর্তনের সাথে কাঁটাচামচ করা হয়েছে: jsfiddle.net/D46y5 এপিআই-তে ডকুমেন্টেড হিসাবে: api.jquery.com/appendTo : "যদি এই উপায়ে নির্বাচিত উপাদানটি ডিওএমের অন্য কোথাও একটি একক স্থানে is োকানো হয় তবে এটি সরানো হবে it লক্ষ্যে (ক্লোন করা হয়নি) এবং elementোকানো উপাদানের সমন্বয়ে একটি নতুন সেট ফিরে আসে "

— জন -

8

@ জন-নোটনম্বারটি ঠিক - এখানে আলাদা () প্রয়োজন নেই। গৃহীত উত্তরটি সবচেয়ে ভাল, আপনার কেবল ডকুমেন্টেশনটি সঠিকভাবে পড়তে হবে।

— লিওনার্ডচ্যালিস

11

অ্যাপেন্ডটো ডকুমেন্টেশন এও বলেছে: "যদি একের অধিক লক্ষ্য উপাদান থাকে তবে প্রথমে পরে প্রতিটি টার্গেটের জন্য sertedোকানো উপাদানটির ক্লোন অনুলিপি তৈরি করা হবে এবং সেই নতুন সেটটি (মূল উপাদান প্লাস ক্লোনস) ফিরে আসবে।" সুতরাং সাধারণ ক্ষেত্রে, এই সমাধানটি অনুলিপি তৈরি করতে পারে!

— ভিনসেন্ট প্যাসেলার 10

মহান! বা আপনি কোথায় স্থানান্তর করবেন সে সম্পর্কে আরও সুনির্দিষ্ট হতে এটি ব্যবহার করতে পারেন$('#nodeToMove').insertAfter('#insertAfterThisElement');

— ভিক্টর অগস্টো

108

আমি সবেমাত্র ব্যবহার করেছি:

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

যা আমি এখান থেকে ধরলাম ।

— kjc26ster
সূত্র

7

ঠিক আছে, আপনি যখন উপাদানটি ধরে রাখতে এবং পরে এটিকে পুনরায় সন্নিবেশ করতে চান তখন বিচ্ছিন্নতা কার্যকর হয় তবে আপনার উদাহরণে আপনি যেকোন উপায়ে তাত্ক্ষণিকভাবে পুনরায় সন্নিবেশ করান।

— টিম বাথ

1

আমি আশঙ্কা করছি আপনি যা পেয়ে যাচ্ছেন তা আমি যথেষ্ট নষ্ট করছি না, আপনি কি নমুনা কোড সরবরাহ করতে পারবেন?

— kjc26ster

1

আমার অর্থ, প্রিপেন্ডটো, উপাদানটিকে তার আসল অবস্থান থেকে আলাদা করে একটি এটিকে নতুনটিতে সন্নিবেশ করায়। অন্যদিকে বিযুক্তকরণ ফাংশনটি কেবল নির্বাচিত উপাদানটিকে আলাদা করে দেয় এবং আপনি এটির পরে কোনও সময়ে ডিওমে সন্নিবেশ করানোর জন্য এটি পরিবর্তনশীলে সংরক্ষণ করতে পারেন। জিনিসটি হল, আপনার বিচ্ছিন্ন কলটি অপ্রয়োজনীয়। এটি সরান এবং আপনি একই প্রভাব অর্জন করবে।

— টিম বাথ

1

অবিশ্বাস্য যে সম্পাদনাগুলি এই উত্তরটিকে পুরোপুরিভাবে বদলে দিয়েছে যে আরও এক বছর পরে আরও একটি উত্তর যুক্ত হয়েছিল (মূলটির সাথে অভিন্ন) এবং ৮০০++ উন্নতি পেয়েছে ...

— hlscalon

96

একটি জাভাস্ক্রিপ্ট সমাধান সম্পর্কে কি ?

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

এটা দেখ.

— আলী বাসম
সূত্র

8

স্রেফ ডকুমেন্ট.জেটমেন্টমেন্ট বাই আইড ('গন্তব্য') এর পরিবর্তে কেন createDocamentFraament ব্যবহার করছেন? অ্যাপেনডাইচাইল্ড (ডকুমেন্ট.সেটমেন্টমেন্টবাইআইডি ('উত্স'))?

— গুনার গেসনার

6

@ গুনারসি.গেসনার ধরে নিচ্ছেন যে গন্তব্য অবজেক্টে যোগ করার আগে আপনার উত্স অবজেক্টটি সংশোধন করা দরকার, তারপরে সবচেয়ে ভাল পদ্ধতির মধ্যে খণ্ডটি ব্যবহার করা যা একটি কাল্পনিক অবজেক্ট এবং ডোম গাছের অংশ নয়, আপনি পরিবর্তনটি সম্পাদন করার সময় আরও ভাল পারফরম্যান্স পাবেন উত্স অবজেক্ট যখন এটি আসল স্থান থেকে স্থানান্তরিত হয়েছিল (এখন এটি খণ্ডের অভ্যন্তরে) এটি সংযোজন করার আগে প্রাথমিক জায়গায় পরিবর্তন করার পরিবর্তে।

— আলী বাসম

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
সূত্র

আমি সমস্ত বোল্ডফেসটি পড়ার জন্য কিছুটা কঠিন খুঁজে পেয়েছি, তবে এটি সর্বাধিক তথ্যবহুল উত্তর, সুতরাং এটি আমার উর্ধ্বে।

— মাইকেল শ্যাপার

32

তুমি ব্যবহার করতে পার:

পরে সন্নিবেশ করতে,

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

অন্য একটি উপাদান ভিতরে প্রবেশ করতে,

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

— Subrahmanyam
সূত্র

20

আপনি কীভাবে উপাদানগুলি সরিয়ে নিয়ে যান সে সম্পর্কে একটি দ্রুত ডেমো এবং আরও বিশদ জানতে চাইলে এই লিঙ্কটি ব্যবহার করে দেখুন:

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

এখানে একটি সংক্ষিপ্ত উদাহরণ:

একটি উপাদান উপরে সরাতে:

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

একটি উপাদান পরে সরাতে:

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

কোনও উপাদানের ভিতরে যেতে, সেই ধারকটির ভিতরে সমস্ত উপাদান সরিয়ে রাখুন:

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

কোনও উপাদানটির ভিতরে যেতে, ধারকটির ভিতরে সমস্ত উপাদান পরে:

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

— দেনিযেল
সূত্র

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>

স্নিপেট প্রসারিত করুন

— সুবোধ গোলাপে
সূত্র

11

পুরানো প্রশ্ন কিন্তু এখানে পেয়েছে কারণ ইভেন্টের শ্রোতাদের সহ আমার কন্টেন্টটি একটি ধারক থেকে অন্য পাত্রে স্থানান্তর করা দরকার ।

jQuery এর এটি করার কোনও উপায় নেই তবে স্ট্যান্ডার্ড ডোম ফাংশন অ্যাপেন্ডচিল্ড রয়েছে।

//assuming only one .source and one .target
$('.source').on('click',function(){console.log('I am clicked');});
$('.target')[0].appendChild($('.source')[0]);

অ্যাপেন্ডচাইল্ড ব্যবহার করা। উত্সটিকে সরিয়ে দেয় এবং এটির ইভেন্ট শ্রোতাদের অন্তর্ভুক্ত করে এটি লক্ষ্যবস্তুতে রাখে: https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild

— HMR
সূত্র

6

আপনিও চেষ্টা করতে পারেন:

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

তবে এটি আপনার যে কোনও কিছু সম্পূর্ণরূপে ওভাররাইট করে দেবে #destination।

— Tamas
সূত্র

2

এবং সরানো উপাদানটিতে ইভেন্ট শ্রোতাদের বিরতি দিন।

— ইগোর পোমারানস্কি

4

আমি মধ্যে বিপুল মেমরি লিক & কর্মক্ষমতা পার্থক্য লক্ষ্য insertAfterও afterবা insertBefore& before.. আপনি DOM উপাদানে টন থেকে থাকে বা আপনি ব্যবহার করতে চান, তাহলে after()বা before()একটি ভিতরে MouseMove ঘটনা , ব্রাউজার মেমরির সম্ভবত বৃদ্ধি হবে এবং পরবর্তী অপারেশন সত্যিই ধীর চালানো হবে।

সমাধানটি আমি সবেমাত্র অভিজ্ঞতা পেয়েছি এর পরিবর্তে before()ইনসারব্রোফার এবং তার পরিবর্তে insertAfter ব্যবহার করা after()।

— spetsnaz
সূত্র

এটি একটি জাভাস্ক্রিপ্ট ইঞ্জিন বাস্তবায়ন-নির্ভর ইস্যুর মতো শোনাচ্ছে। আপনি কোন ব্রাউজার সংস্করণ এবং জেএস ইঞ্জিনের সাথে এটি দেখতে পাচ্ছেন?

— রিচম্যান 21

1

আমি ক্রোম সংস্করণে 36.0.1985.125 এবং jQuery v1.11.1 ব্যবহার করছি। আমি মাউসমেভ ইভেন্টে একটি ফাংশন বাঁধাই, যা মাউসটি শেষ হয়ে যাওয়া উপাদানটিকে নীচে বা উপরে সরিয়ে দেয় একটি সাধারণ ডিআইভি। অতএব, আপনি যখন আপনার কার্সারটিকে টেনে আনেন তখন এই ইভেন্ট ও ফাংশনটি চলতে থাকে। () পরে এবং এর আগে () এর পরে মেমরি ফাঁস হয়, যদি আপনি আপনার কার্সারটি 30 সেকস + এর জন্য সরিয়ে থাকেন, এবং যদি আমি কেবল insertAfter এবং insertBefore ব্যবহার না করি তবে এটি অদৃশ্য হয়ে যায়।

— spetsnaz

1

আমি সেই সাথে গুগলের সাথে একটি বাগ খুলব।

— রিচম্যান 21

2

আপনি appendChild()পদ্ধতিটি ব্যবহার করে খাঁটি জাভাস্ক্রিপ্ট ব্যবহার করতে পারেন ...

অ্যাপেন্ডচাইল্ড () পদ্ধতিটি নোডের শেষ সন্তানের হিসাবে নোড যুক্ত করে।

টিপ: আপনি যদি পাঠ্যের সাথে একটি নতুন অনুচ্ছেদ তৈরি করতে চান তবে পাঠকে একটি পাঠ নোড হিসাবে তৈরি করতে মনে রাখবেন যা আপনি অনুচ্ছেদে যুক্ত করেছেন, তারপরে নথিতে অনুচ্ছেদ যুক্ত করুন।

একটি উপাদান থেকে অন্য উপাদানটিতে স্থানান্তরিত করতে আপনি এই পদ্ধতিটিও ব্যবহার করতে পারেন।

টিপ: একটি নির্দিষ্ট, বিদ্যমান, শিশু নোডের আগে একটি নতুন শিশু নোড sertোকানোর জন্য insertBefire () পদ্ধতিটি ব্যবহার করুন।

কাজটি করার জন্য আপনি এটি করতে পারেন, এটি আমি আপনার জন্য তৈরি করেছি, ব্যবহার করছি 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>

স্নিপেট প্রসারিত করুন

— আলিরেজা
সূত্র

0

সম্পূর্ণতার স্বার্থে, এই নিবন্ধে আরও একটি পদ্ধতির wrap()বা wrapAll()উল্লেখ রয়েছে । সুতরাং ওপির প্রশ্নটি সম্ভবত এটির মাধ্যমে সমাধান করা যেতে পারে (এটি হ'ল, এটি এখনও বিদ্যমান নয় বলে ধরে নিলে নিম্নলিখিত পদ্ধতিটি স্ক্র্যাচ থেকে এই জাতীয় একটি মোড়ক তৈরি করবে - মোড়কের ইতিমধ্যে উপস্থিত রয়েছে কি না সে সম্পর্কে ওপি পরিষ্কার ছিল না):<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")পরিবর্তে স্পষ্ট ব্যবহার শেষ । সুতরাং, ওয়াইএমএমভি।

— RayLuo
সূত্র