HTML को div में सम्मिलित करना

Question

मैं एक div में HTML का एक हिस्सा डालने की कोशिश कर रहा हूँ। मैं यह देखना चाहता हूं कि क्या jQuery का उपयोग करने की तुलना में सादे जावास्क्रिप्ट तरीका तेज है या नहीं। दुर्भाग्य से, मैं भूल गया कि इसे 'पुराने' तरीके से कैसे किया जाए। : पी

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 या सादा js तो मैंने एक परीक्षण लिखा:
http://jsperf.com/html-insertion-js-vs-jquery

सादे js 10% तेज है

Comments

अब कौन सा तेज है? सादे जावास्क्रिप्ट या jquery?

— अली

@ अली: js तेज है, मेरा संपादन देखें।

— मोरिकैक

Answer 1

मुझे लगता है कि आप यही चाहते हैं:

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

ध्यान रखें कि IE का उपयोग करते समय सभी प्रकार के टैग के लिए इनरबॉटम एक्सेसिबल नहीं है। (उदाहरण के लिए तालिका तत्व)

Comments

आईई संगतता का उल्लेख करने के लिए +1, काश हर कोई ऐसा करता!

— एनरिको

बहुत बहुत धन्यवाद!

— user3396381

Answer 2

JQuery का उपयोग करने से उस ब्राउज़र की असंगति का ख्याल रखा जाएगा। अपनी परियोजना में शामिल jquery लाइब्रेरी के साथ बस लिखें:

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

तुम भी उपयोग पर विचार कर सकते हैं:

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

यह आपकी गैलरी को चयनित div में अंतिम आइटम के रूप में जोड़ेगा। या:

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

यह इसे चयनित div में पहले आइटम के रूप में जोड़ेगा।

इन कार्यों के लिए JQuery डॉक्स देखें:

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

Comments

ओपी ने विशेष रूप से सादे जावास्क्रिप्ट के लिए कहा, लेकिन इससे मुझे मदद मिली, इसलिए मैं अभी भी इसे उपयोगी मानता हूं।

— डबलजुल

Html डाला की एक लंबी स्ट्रिंग के साथ एक उदाहरण देखने में मदद करेगा। उदाहरण के लिए, मेरे पास एक मामला है जिसमें सर्वर प्रौद्योगिकियां (php आदि) अस्वीकृत हैं, और मैं उसी पृष्ठ के अंदर html की लगभग 20 पंक्तियों का फिर से उपयोग करना चाहता हूं।

— जेनिफर मिशेल

यह काम आ सकता है। धन्यवाद।

— arunken

Answer 3

मैं "+" (प्लस) का उपयोग करके html में div सम्मिलित करता हूं:

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

उममीद है कि इससे मदद मिलेगी।

Comments

+ = उत्तर के लिए धन्यवाद, जिसने मुझे बहुत सारे सिरदर्द से बचाया।

— माइकल टुननेल

@MichaelTunnell ने वास्तव में यह किया

— दिव्य

धन्यवाद। AppendChild समारोह मेरे लिए काम नहीं किया था, लेकिन यह अच्छी तरह से अपने प्रयोग के मामले के लिए काम किया।

— खविलो

यह सही उत्तर है, प्रश्न पूछ रहा था कि कैसे सम्मिलित करें, धन्यवाद

— OJB1

Answer 4

विकल्प के रूप में आप InsertAdjacentHTML का उपयोग कर सकते हैं - हालाँकि मैं खोदता हूँ और कुछ प्रदर्शन परीक्षण करता हूँ - (2019.09.13 शुक्रवार) MacOs High Sierra 10.13.6 Chrome 76.0.3809 (64-बिट), Safari 12.1.2 (1360.5.5.6) पर, फ़ायरफ़ॉक्स 69.0.0 (64-बिट))। परीक्षण F केवल संदर्भ के लिए है - यह प्रश्न के दायरे से बाहर है क्योंकि हमें डायनामिक रूप से HTML सम्मिलित करने की आवश्यकता है - लेकिन F में मैं इसे 'हाथ' से (स्थैतिक तरीके से) करता हूं - सैद्धांतिक रूप से (जहां तक ​​मुझे पता है) यह होना चाहिए नया html elements डालने का सबसे तेज़ तरीका।

सारांश

• एक innerHTML = (कर भ्रमित नहीं के साथ +=) है सबसे तेज (सफारी प्रति सेकंड 48k संचालन, फायरफॉक्स 43k सेशन / सेक, क्रोम 23k सेशन / सेकंड) एक आदर्श समाधान की तुलना में धीमी 31% है ~ एफ केवल क्रोम लेकिन सफारी और पर फ़ायरफ़ॉक्स तेजी से होता है ( !)
• बी innerHTML +=... सभी ब्राउज़रों पर सबसे धीमी है (क्रोम 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

और कई लाइनें इस तरह दिख सकती हैं। यहाँ html केवल नमूना है।

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