एक 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% तेजी है

Answer 1

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

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

ध्यान रखें कि आंतरिक HTML सभी प्रकार के टैग के लिए पहुंच योग्य नहीं है आईई का उपयोग कर। (उदाहरण के लिए टेबल तत्व)

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/

Answer 3

मैं का उपयोग कर "+" (प्लस) HTML करने के लिए div डालने के लिए:

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

इस सहायता की आशा करें।

Answer 4

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

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