jquery .html () বনাম। অ্যাপেন্ড ()

Question

বলুন আমার খালি ডিভ আছে:

<div id='myDiv'></div>

এটি কি:

$('#myDiv').html("<div id='mySecondDiv'></div>");

হিসাবে একই:

var mySecondDiv=$("<div id='mySecondDiv'></div>");
$('#myDiv').append(mySecondDiv);

Comments

না, দ্বিতীয়টির কোনও আইডি নেই, সুতরাং একই পাঠ্য আউটপুট হবে না।

— ম্যাট এলেন

.html আপনি প্রথমবার চালানোর পরে অনেক দ্রুত। আপনি যখন প্রথমবার চালাবেন তখন এটি দ্বিতীয় বা তাই নিতে পারে।

— sukhjit dhot

Answer 1

আপনি যখনই jQuery এর যে কোনও পদ্ধতিতে এইচটিএমএল একটি স্ট্রিং পাস করেন, যা ঘটে তা ঘটে:

একটি অস্থায়ী উপাদান তৈরি করা হয়, আসুন এটি এক্স বলুন। x এর innerHTMLএইচটিএমএল এর স্ট্রিংটিতে সেট করা আছে যা আপনি পেরিয়ে গেছেন। তারপরে jQuery উত্পাদিত প্রতিটি নোডের (যা x এর childNodes) প্রতিটি নতুন তৈরি করা নথি খণ্ডে স্থানান্তরিত করবে , যা এটি পরবর্তী সময়ের জন্য ক্যাশে করবে will তারপরে এটি খণ্ডটিকে childNodesএকটি নতুন টাওম সংগ্রহ হিসাবে ফিরিয়ে দেবে ।

মনে রাখবেন যে এটি আসলে এর চেয়ে অনেক জটিল, কারণ jQuery ক্রস ব্রাউজারের চেক এবং অন্যান্য বিভিন্ন অপ্টিমাইজেশন করে। যেমন যদি আপনি শুধু পাস <div></div>করার জন্য jQuery(), jQuery এর একটি শর্টকাট নিতে হবে কেবল না document.createElement('div')।

সম্পাদনা : jQuery সম্পাদন করে এমন চেকগুলির নিখুঁত পরিমাণটি দেখতে, এখানে , এখানে এবং এখানে একবার দেখুন ।

---

innerHTMLএটি সাধারণত দ্রুত পদ্ধতির হয়, যদিও এটি আপনি সমস্ত সময় যা পরিচালনা করেন তা নিয়ন্ত্রণ করতে দেবেন না। jQuery এর দৃষ্টিভঙ্গি ততটা সহজ নয় element.innerHTML = ...- যেমনটি আমি উল্লেখ করেছি, সেখানে প্রচুর পরিমাণে চেক এবং অপটিমাইজেশন ঘটছে।

---

সঠিক কৌশলটি পরিস্থিতির উপর খুব বেশি নির্ভর করে। যদি আপনি প্রচুর পরিমাণে অভিন্ন উপাদান তৈরি করতে চান তবে সর্বশেষে আপনি যা করতে চান তা হ'ল একটি বিশাল লুপ তৈরি করে প্রতিটি পুনরাবৃত্তিতে একটি নতুন জিকুয়েরি অবজেক্ট তৈরি করা। যেমন jQuery দিয়ে 100 ডিভ তৈরির দ্রুততম উপায়:

jQuery(Array(101).join('<div></div>'));

---

বিবেচনায় নেওয়ার জন্য পাঠযোগ্যতা এবং রক্ষণাবেক্ষণের বিষয়গুলিও রয়েছে।

এই:

$('<div id="' + someID + '" class="foobar">' + content + '</div>');

... এটির তুলনায় অনেক কঠিন:

$('<div/>', {
    id: someID,
    className: 'foobar',
    html: content
});

Comments

jQuery এর (অ্যারে (101) .join ( '<p> </ p>')); <- 100 এর পরিবর্তে 101?

— টাকোন

কেবল একটি ডেটাপয়েন্ট যুক্ত করতে চেয়েছিলেন। এমন কোনও অ্যাপ্লিকেশনটিতে কিছু পারফরম্যান্স টেস্টিং করা যা <li> এর বৃহত (10 কে +) ব্যাচকে <ul> এ লোড করে এবং অ্যাপ্লিকেশনটিতে স্যুইচ করে 12 ডলার ->। 25 সেকেন্ডে রেন্ডার (লোড নয়) সময় বৃদ্ধি পেয়েছে ( giantListHTMLAsASingleString) থেকে .html (giantListHTMLAsASingleString)। আপনি যদি ইতিমধ্যে 'যোগ দিন' কৌশল করছেন বা আপনার তালিকায় একটি বড় এইচটিএমএল স্ট্রিং তৈরি করছেন তবে অবশ্যই এই দুটি পদ্ধতিতে একটি পার্থক্য রয়েছে।

— অলমনিস

@ ট্যাকোন কারণ অ্যারে উপাদানগুলির মধ্যে যোগদান "আঠালো" প্রয়োগ করা হয় । 101100 আঠা থাকবে আবেদন করেছিলেন, মাত্র 3 উপাদান যোগদান 2 আঠা হবে মত: EL-glue-EL-glue-EL। জেমসের উদাহরণে অ্যারে উপাদানগুলি "খালি" তাই এন খালি উপাদানগুলিতে যোগদানের ফলে টানা N-1 টি আঠালো হয়।

— ফ্যাব্রিসিও ম্যাট

উপরে ব্যবহৃত jquery সিনট্যাক্সের জন্য একটি রেফারেন্সে আগ্রহী এবং যা অনুমোদিত তা api.jquery.com/jquery/#jQuery-html-attributes দেখুন ।

— থাডিউস অ্যালবার্স

এর মধ্যে একটি বড় পার্থক্য রয়েছে যে এটি ডোমের সাথে সংযুক্ত যা কিছু ডেটা হারায়।

— অ্যাড্রিয়ান বার্থোলোমিউ

Answer 2

তারা একই নয়। প্রথমটি প্রথমে অন্য jQuery অবজেক্ট তৈরি না করে HTML প্রতিস্থাপন করে। দ্বিতীয়, দ্বিতীয় DIV আছে জন্য একটি অতিরিক্ত jQuery এর মোড়কের সৃষ্টি তারপর appends প্রথম থেকে এটি।

একটি jQuery আবরণ (উদাহরণস্বরূপ):

$("#myDiv").html('<div id="mySecondDiv"></div>');

$("#myDiv").append('<div id="mySecondDiv"></div>');

দুটি jQuery আবরণ (উদাহরণস্বরূপ):

var mySecondDiv=$('<div id="mySecondDiv"></div>');
$('#myDiv').html(mySecondDiv);

var mySecondDiv=$('<div id="mySecondDiv"></div>');
$('#myDiv').append(mySecondDiv);

আপনার কয়েকটি পৃথক ব্যবহারের মামলা চলছে। আপনি যদি সামগ্রীটি প্রতিস্থাপন করতে চান তবে .htmlএটির সমতুল্য হওয়ার জন্য একটি দুর্দান্ত কল innerHTML = "..."। তবে, আপনি যদি কেবল বিষয়বস্তু সংযোজন করতে চান তবে অতিরিক্ত $()মোড়কের সেটটি অনিবদ্ধ করা হয়েছে।

আপনার যদি divপরে যুক্ত হওয়াতে হেরফের করতে হয় তবে কেবল দুটি র‍্যাপার ব্যবহার করুন। এমনকি সেক্ষেত্রে আপনার এখনও কেবল একটি ব্যবহারের প্রয়োজন হতে পারে:

var mySecondDiv = $("<div id='mySecondDiv'></div>").appendTo("#myDiv");
// other code here
mySecondDiv.hide();

Comments

দেখেন তো? স্ট্রিং কনটেনটেশন ইতিমধ্যে এখানে একটি ত্রুটি দেয় (অনস্ক্রিপ্ট উদ্ধৃতি)। আমার পোস্ট দেখুন: পি

— কিজএক্স 2

Answer 3

যদি .addআপনার অর্থ হয় .append, তবে #myDivখালি থাকলে ফলাফলটি একই the

পারফরম্যান্স কি একই রকম? জানি না

.html(x) হিসাবে একই জিনিস শেষ .empty().append(x)

Comments

এছাড়াও, প্রথমটির স্পষ্টতই মাই সেকেন্ডডিভের একটি আইডি থাকবে এবং অন্যটির কোনও আইডি নেই। এবং একক উদ্ধৃতি ব্যবহার করতে সক্ষম হতে ডাবল উদ্ধৃতি ব্যবহার করে সিনট্যাক্সটি .html ("<div id = 'mySecondDiv'> </div>") হওয়া দরকার।

— রায়ানুলিট

Answer 4

ভাল, .html()ব্যবহারগুলি .innerHTMLযা ডিওএম তৈরির চেয়ে দ্রুত ।

Answer 5

আপনি একই পদ্ধতি অর্জনের জন্য দ্বিতীয় পদ্ধতিটি পেতে পারেন:

var mySecondDiv = $('<div></div>');
$(mySecondDiv).find('div').attr('id', 'mySecondDiv');
$('#myDiv').append(mySecondDiv);

লুকা উল্লেখ করেছে যে html()কেবল hte এইচটিএমএল সন্নিবেশ করায় যার ফলে দ্রুত কার্য সম্পাদন হয় in

কিছু ক্ষেত্রে যদিও, আপনি দ্বিতীয় বিকল্পটি বেছে নেবেন, বিবেচনা করুন:

// Clumsy string concat, error prone
$('#myDiv').html("<div style='width:'" + myWidth + "'px'>Lorem ipsum</div>");

// Isn't this a lot cleaner? (though longer)
var newDiv = $('<div></div>');
$(newDiv).find('div').css('width', myWidth);
$('#myDiv').append(newDiv);

Comments

এটি চূড়ান্তভাবে অযোগ্য (এবং ভাঙ্গা) jQuery কোড। আপনি যদি px$('<div />', { width: myWidth }).appendTo("#myDiv");

— কনটেনটেশন

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

— kizzx2

Answer 6

.html() সবকিছু প্রতিস্থাপন করা হবে।

.append() শুধু শেষে সংযোজন করা হবে।

Answer 7

প্রদত্ত উত্তরগুলি ব্যতীত আপনার কাছে এরকম কিছু রয়েছে:

<div id="test">
    <input type="file" name="file0" onchange="changed()">
</div>
<script type="text/javascript">
    var isAllowed = true;
    function changed()
    {
        if (isAllowed)
        {
            var tmpHTML = $('#test').html();
            tmpHTML += "<input type=\"file\" name=\"file1\" onchange=\"changed()\">";
            $('#test').html(tmpHTML);
            isAllowed = false;
        }
    }
</script>

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

    function changed()
    {
        if (isAllowed)
        {
            var tmpHTML = "<input type=\"file\" name=\"file1\" onchange=\"changed()\">";
            $('#test').append(tmpHTML);
            isAllowed = false;
        }
    }

Answer 8

আমার সাথে এই ঘটনা ঘটেছে। জেকারি সংস্করণ: 3.3। আপনি যদি কোনও অবজেক্টের তালিকার বাইরে চলে যাচ্ছেন এবং প্রতিটি বস্তুকে কিছু পিতা বা মাতা ডোমের উপাদান হিসাবে যোগ করতে চান তবে .html এবং .append খুব আলাদা আচরণ করবে। .htmlপিতামণ্ডলের উপাদানটিতে কেবলমাত্র শেষ অবজেক্ট যুক্ত করা শেষ হবে, যেখানে .appendসমস্ত তালিকার অবজেক্টগুলিকে পিতামণ্ডলের উপাদান হিসাবে যুক্ত করা হবে।