একটি ডিভিতে এইচটিএমএল .োকানো হচ্ছে

Question

আমি এইচটিএমএল এর একটি অংশ একটি ডিভিতে sertোকানোর চেষ্টা করছি। আমি দেখতে চাই যে প্লেইন জাভাস্ক্রিপ্টের উপায়টি jQuery ব্যবহারের চেয়ে দ্রুত। দুর্ভাগ্যক্রমে, আমি কীভাবে এটি 'পুরানো' পদ্ধতিতে করব তা ভুলে গিয়েছিলাম। : P: P

var test2 = function(){
    var cb = function(html){
        var t1 = document.getElementById("test2");
        var d = document.createElement("div");
        d.id ="oiio";
        d.innerHtml = html;
        t1.appendChild(d);
        console.timeEnd("load data with javascript");
    };
    console.time("load data with javascript");
    $.get("test1.html", cb);
}

আমি এখানে কি ভুল করছি?

সম্পাদনা করুন :
কেউ জিজ্ঞাসা করেছে কোনটি দ্রুত, jquery বা সরল জেএস তাই আমি একটি পরীক্ষা লিখেছিলাম:
http://jsperf.com/html-insertion-js-vs-jquery

প্লেইন জেএস 10% দ্রুত

Comments

এখন কোনটি দ্রুত? সরল জাভাস্ক্রিপ্ট বা jquery?

— আলী

@ অলি: জেএস দ্রুত, আমার সম্পাদনা দেখুন।

— mkoryak

Answer 1

আমি মনে করি এটি আপনি যা চান:

document.getElementById('tag-id').innerHTML = '<ol><li>html data</li></ol>';

আইই ব্যবহার করার সময় অন্তর্নিহিত এইচটিএমএল সব ধরণের ট্যাগের জন্য অ্যাক্সেসযোগ্য নয় mind (উদাহরণস্বরূপ সারণী উপাদান)

Comments

IE সামঞ্জস্যতা উল্লেখ করার জন্য +1, আশা করি সবাই এটি করুক!

— এনরিকো

দুর্দান্ত, আপনাকে ধন্যবাদ!

— ইউজার 3396381

Answer 2

JQuery ব্যবহার করা সেই ব্রাউজারের অসঙ্গতি যত্ন নেবে। আপনার প্রকল্পে অন্তর্ভুক্ত jquery লাইব্রেরি সহ সহজভাবে লিখুন:

$('#yourDivName').html('yourtHTML');

আপনি ব্যবহার বিবেচনা করতে পারেন:

$('#yourDivName').append('yourtHTML');

এটি আপনার গ্যালারীটি নির্বাচিত ডিভের শেষ আইটেম হিসাবে যুক্ত করবে। বা:

$('#yourDivName').prepend('yourtHTML');

এটি এটি নির্বাচিত ডিভের প্রথম আইটেম হিসাবে যুক্ত করবে।

এই ফাংশনগুলির জন্য JQuery ডক্স দেখুন:

• http://api.jquery.com/append/
• http://api.jquery.com/prepend/

Comments

ওপি বিশেষত সরল জাভাস্ক্রিপ্টের জন্য জিজ্ঞাসা করেছিল, তবে এটি আমাকে সহায়তা করেছিল, তাই আমি এখনও এটি দরকারী বলে মনে করি।

— ডাবলজে

Html .োকানো একটি দীর্ঘ স্ট্রিং সহ একটি উদাহরণ দেখতে সহায়তা করবে। উদাহরণস্বরূপ, আমার একটি কেস রয়েছে যাতে সার্ভার প্রযুক্তিগুলি (পিএইচপি ইত্যাদি) অনুমোদিত নয় এবং আমি একই পৃষ্ঠার ভিতরে প্রায় 20 টি লাইন এইচটিএমএল পুনরায় ব্যবহার করতে চাই want

— জেনিফার মিশেল

এটি কাজে আসতে পারে। ধন্যবাদ।

— 11:39

Answer 3

আমি এইচটিএমএলে ডিভটি প্রবেশ করানোর জন্য "+" (প্লাস) ব্যবহার করছি:

document.getElementById('idParent').innerHTML += '<div id="idChild"> content html </div>';

এই সাহায্য আশা করি।

Comments

++ উত্তরের জন্য ধন্যবাদ, যা আমাকে প্রচুর মাথা ব্যাথা থেকে বাঁচিয়েছে।

— মাইকেল টুনেল

@MichaelTunnell এটা সত্যিই করেনি

— ঐশ্বরিক

ধন্যবাদ. AppendChild ফাংশন আমাকে জন্য কাজ না করে কিন্তু এই ভাল আমার ব্যবহারের ক্ষেত্রে কাজ করেন।

— খভিলো

এটি সঠিক উত্তর, প্রশ্নটি কীভাবে সন্নিবেশ করবেন জিজ্ঞাসা করছিল, ধন্যবাদ

— ওজেবি

Answer 4

বিকল্প হিসাবে আপনি insertAdjacentH HTML ব্যবহার করতে পারেন - তবে আমি খনন করে কিছু পারফরম্যান্স পরীক্ষা করেছি - (2019.09.13 শুক্রবার) ক্রোম 76.0.3809 (64-বিট), সাফারি 12.1.2 (13604.5.6) এ ম্যাকওস হাই সিয়েরা 10.13.6, ফায়ারফক্স 69.0.0 (-৪-বিট)। পরীক্ষামূলক ফলটি কেবলমাত্র রেফারেন্সের জন্য - এটি প্রশ্নের ক্ষেত্রের বাইরে কারণ আমাদের ডায়নামিকভাবে এইচটিএমএল toোকানো দরকার - তবে এফ এ আমি এটি 'হাত' দিয়ে করি (স্থির পথে) - তাত্ত্বিকভাবে (যতদূর আমি জানি) এটি হওয়া উচিত নতুন এইচটিএমএল উপাদানগুলি সন্নিবেশ করার দ্রুততম উপায়।

সারসংক্ষেপ

• একটি innerHTML = (না গুলান না সঙ্গে +=) হল দ্রুততম (সাফারি প্রতি সেকেন্ডে 48k অপারেশন, ফায়ারফক্স 43k অপ / সেকেন্ড, ক্রোম 23k অপ / সেকেন্ড) একটি আদর্শ সমাধান তুলনায় ধীর 31% হল ~ এফ শুধুমাত্র Chrome কিন্তু সাফারি এবং এর ফায়ারফক্স দ্রুততর ( !)
• বি innerHTML +=... সকল ব্রাউজারে ধীরতম (যেমন Chrome 95 অপ / সেকেন্ড, ফায়ারফক্স 88 অপ / সেকেন্ড, Sfari 84 অপ / সেকেন্ড)
• ডি jQuery এর সমস্ত ব্রাউজার (সাফারি 14 অপ / সেকেন্ড, ফায়ারফক্স 11k অপ / সেকেন্ড, ক্রোম 7k অপ / সেকেন্ড) দ্বিতীয় ধীর
• রেফারেন্স সমাধান এফ (তাত্ত্বিকভাবে দ্রুততম) ফায়ারফক্স এবং সাফারি (!!!) এ দ্রুততম নয় - যা অবাক করার মতো
• দ্রুততম ব্রাউজারটি ছিল সাফারি

কেন সম্পর্কে আরও তথ্য innerHTML =অনেক দ্রুত চেয়ে innerHTML +=হয় এখানে । আপনি এখানে আপনার মেশিন / ব্রাউজারে পরীক্ষা করতে পারেন

let html = "<div class='box'>Hello <span class='msg'>World</span> !!!</div>"

function A() {    
  container.innerHTML = `<div id="A_oiio">A: ${html}</div>`;
}

function B() {    
  container.innerHTML += `<div id="B_oiio">B: ${html}</div>`;
}

function C() {    
  container.insertAdjacentHTML('beforeend', `<div id="C_oiio">C: ${html}</div>`);
}

function D() {    
  $('#container').append(`<div id="D_oiio">D: ${html}</div>`);
}

function E() {
  let d = document.createElement("div");
  d.innerHTML = `E: ${html}`;
  d.id = 'E_oiio';
  container.appendChild(d);
}

function F() {    
  let dm = document.createElement("div");
  dm.id = "F_oiio";
  dm.appendChild(document.createTextNode("F: "));

  let d = document.createElement("div");
  d.classList.add('box');
  d.appendChild(document.createTextNode("Hello "));
  
  let s = document.createElement("span");
  s.classList.add('msg');
  s.appendChild(document.createTextNode("World"));

  d.appendChild(s);
  d.appendChild(document.createTextNode(" !!!"));
  dm.appendChild( d );
  
  container.appendChild(dm);
}


A();
B();
C();
D();
E();
F();

.warr { color: red } .msg { color: blue } .box {display: inline}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="warr">This snippet only for show code used in test (in jsperf.com) - it not perform test itself. </div>
<div id="container"></div>

Answer 5

এবং অনেক লাইন এটি দেখতে হতে পারে। এখানে এইচটিএমএল শুধুমাত্র নমুনা।

var div = document.createElement("div");

div.innerHTML =
    '<div class="slideshow-container">\n' +
    '<div class="mySlides fade">\n' +
    '<div class="numbertext">1 / 3</div>\n' +
    '<img src="image1.jpg" style="width:100%">\n' +
    '<div class="text">Caption Text</div>\n' +
    '</div>\n' +

    '<div class="mySlides fade">\n' +
    '<div class="numbertext">2 / 3</div>\n' +
    '<img src="image2.jpg" style="width:100%">\n' +
    '<div class="text">Caption Two</div>\n' +
    '</div>\n' +

    '<div class="mySlides fade">\n' +
    '<div class="numbertext">3 / 3</div>\n' +
    '<img src="image3.jpg" style="width:100%">\n' +
    '<div class="text">Caption Three</div>\n' +
    '</div>\n' +

    '<a class="prev" onclick="plusSlides(-1)">&#10094;</a>\n' +
    '<a class="next" onclick="plusSlides(1)">&#10095;</a>\n' +
    '</div>\n' +
    '<br>\n' +

    '<div style="text-align:center">\n' +
    '<span class="dot" onclick="currentSlide(1)"></span> \n' +
    '<span class="dot" onclick="currentSlide(2)"></span> \n' +
    '<span class="dot" onclick="currentSlide(3)"></span> \n' +
    '</div>\n';

document.body.appendChild(div);