JQuery এর প্রতিস্থাপনের সাথে () এবং এইচটিএমএল () এর মধ্যে পার্থক্য কী?


145

এইচটিএমএল যখন প্যারামিটার হিসাবে পাস হচ্ছে তখন jQuery এর প্রতিস্থাপনের সাথে () এবং html () ফাংশনগুলির মধ্যে পার্থক্য কী?


2
এই আমাকে সাহায্য! আমি jquery ব্যবহার করে একটি লেবেলের পাঠ্যকে পরিবর্তনশীল করার চেষ্টা করছিলাম এবং এই থ্রেডটি অবশ্যই আমাকে সহায়তা করেছিল। ধন্যবাদ!
টোলেয়ার্ন_১১

উত্তর:


289

এই এইচটিএমএল কোডটি নিন:

<div id="mydiv">Hello World</div>

এরকম:

$('#mydiv').html('Aloha World');

ফলাফল হবে:

<div id="mydiv">Aloha World</div>

এরকম:

$('#mydiv').replaceWith('Aloha World');

ফলাফল হবে:

Aloha World

সুতরাং এইচটিএমএল () উপাদানটির বিষয়বস্তুগুলি প্রতিস্থাপন করে, যখন প্রতিস্থাপনের সাথে () প্রকৃত উপাদানকে প্রতিস্থাপন করে।


1
সুন্দর ব্যাখ্যা!
লুইস গওভিয়া

31

প্রতিস্থাপনের সাথে () বর্তমান উপাদানটিকে প্রতিস্থাপন করবে, যেখানে এইচটিএমএল () কেবল বিষয়বস্তুগুলিকে প্রতিস্থাপন করে।

মনে রাখবেন যে প্রতিস্থাপনের সাথে () আসলে উপাদানটি মুছবে না তবে কেবল এটি ডিওএম থেকে অপসারণ করবে এবং এটি আপনাকে সংগ্রহে ফিরিয়ে দেবে।

পিটারের জন্য একটি উদাহরণ: http://jsbin.com/ofirip/2


3
এটি লিখতে +1 খুব দরকারী যে প্রতিস্থাপনের সাথে () আসলে উপাদানটি মুছবে না। আমি এটা খুঁজে না!
পিটার

2
এটি সত্য, এটি এখনও বিদ্যমান। এটি ডোমে নেই, সুতরাং আপনি এটি দেখতে পাবেন না তবে এটি এখনও HTML এর একটি বৈধ টুকরো। প্রুফ: jsbin.com/ofirip/2
cgp

1
হ্যা এইটা সত্যি. উদাহরণ স্থাপন করার জন্য ধন্যবাদ। আমি এটি ডিওএম থেকে অপসারণের (অতিরিক্ত আবর্জনা সংগ্রহ) ভাবছিলাম আমার দৃষ্টিভঙ্গি থেকে মূলত মুছে ফেলার জন্য। তবে আপনি প্রযুক্তিগতভাবে সঠিক। আমি এটিকে সরিয়ে দেব -1এবং আশা করি এটি সবার জন্য সহায়ক হবে। :)
পিটার

1
নোটের জন্য ধন্যবাদ, প্রতিস্থাপনের সাথে () পুরানো উপাদানটি ফিরিয়ে দেওয়া আমাকে কিছুটা ডিবাগিং হতাশা দিয়েছে :(
ডেইন

2
হ্যাঁ, আমি এখন এটি কমপক্ষে আধা ঘন্টা ধরে লড়াই করছি, আমি কেবল বুঝতে পেরেছিলাম যে ফাংশনটি প্রতিস্থাপিত উপাদানটি ফিরিয়ে দেয়, আমি এটির মতো কোড সহ নতুনটি ফিরে আসার প্রত্যাশা করছিলাম: var $form = $target.closest('tr').replaceWith(html) এটি $formপ্রতিস্থাপনের আগে উপাদানটি ধারণ করে। দীর্ঘশ্বাস
ফেলুন

5

এইচটিএমএল () এবং রিপ্লেস উইথ () জ্যাকুরি ফাংশন ব্যবহার করার দুটি উপায় রয়েছে।

<div id="test_id">
   <p>My Content</p>
</div>

1.) এইচটিএমএল () বনাম প্রতিস্থাপন ()

var html = $('#test_id p').html(); "আমার সামগ্রী" ফিরিয়ে দেবে

তবে এর var replaceWith = $('#test_id p').replaceWith();পুরো DOM অবজেক্টটি ফিরিয়ে দেবে <p>My Content</p>


২) এইচটিএমএল ('মান') বনাম প্রতিস্থাপন ('মান')

$('#test_id p').html('<h1>H1 content</h1>'); আপনি নীচের আউট পুট দিতে হবে।

<div id="test_id">
  <p><h1>H1 content</h1></p>
</div>

তবে $('#test_id p').replaceWith('<h1>H1 content</h1>');আপনাকে নিম্নলিখিত নীচে রাখবে।

<div id="test_id">
      <h1>H1 content</h1>
</div>

2

পুরানো প্রশ্ন তবে এটি কারও সাহায্য করতে পারে।

ইন্টারনেট এক্সপ্লোরার এবং ক্রোম / ফায়ারফক্সে কীভাবে এই ফাংশনগুলি পরিচালনা করে তার মধ্যে কিছু পার্থক্য রয়েছে যদি আপনার এইচটিএমএলটি বৈধ না থাকে।

আপনার এইচটিএমএল পরিষ্কার করুন এবং তারা ডকুমেন্ট হিসাবে কাজ করবে।

( </center>আমার সন্ধ্যার জন্য আমার ব্যয় বন্ধ না করে !)


6
এজন্য আপনার আর কেন্দ্র ব্যবহার করা উচিত নয়। : পি
রোমান উপজাতি

2

এটি এটির .empty().append()পরিবর্তেও ব্যবহার করা যেতে পারে তা জানাও দরকারী .html()। নীচে দেখানো বেঞ্চমার্কে এটি দ্রুত তবে কেবল যদি আপনাকে এই ফাংশনটি বহুবার কল করার প্রয়োজন হয়।

দেখুন: https://jsperf.com/jquery-html-vs-empty-append-test

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.