การแทรก HTML ลงใน div

ฉันกำลังพยายามแทรก HTML ส่วนหนึ่งลงใน div ฉันต้องการดูว่าวิธี JavaScript ธรรมดาเร็วกว่าการใช้ jQuery หรือไม่ น่าเสียดายที่ฉันลืมวิธีการ 'แบบเก่า' ไป : 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 หรือ js ธรรมดาดังนั้นฉันจึงเขียนแบบทดสอบ:
http://jsperf.com/html-insertion-js-vs-jquery

js ธรรมดาเร็วขึ้น 10%

ฉันคิดว่านี่คือสิ่งที่คุณต้องการ:

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

โปรดทราบว่า innerHTML ไม่สามารถเข้าถึงได้สำหรับแท็กทุกประเภทเมื่อใช้ IE (องค์ประกอบตารางเช่น)

การใช้ JQuery จะช่วยดูแลความไม่สอดคล้องกันของเบราว์เซอร์นั้น ด้วยไลบรารี jquery ที่รวมอยู่ในโครงการของคุณเพียงแค่เขียน:

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

คุณอาจพิจารณาใช้:

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

สิ่งนี้จะเพิ่มแกลเลอรีของคุณเป็นรายการสุดท้ายใน div ที่เลือก หรือ:

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

สิ่งนี้จะเพิ่มเป็นรายการแรกใน div ที่เลือก

ดูเอกสาร JQuery สำหรับฟังก์ชันเหล่านี้:

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

ฉันใช้ "+" (บวก) เพื่อแทรก div เป็น html:

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

หวังว่าจะช่วยได้

คุณสามารถใช้insertAdjacentHTMLเป็นทางเลือก- อย่างไรก็ตามฉันเจาะลึกและทำการทดสอบประสิทธิภาพ - (2019.09.13 วันศุกร์) MacOs High Sierra 10.13.6 บน Chrome 76.0.3809 (64 บิต), Safari 12.1.2 (13604.5.6), Firefox 69.0.0 (64 บิต)) การทดสอบFใช้สำหรับการอ้างอิงเท่านั้น - อยู่นอกขอบเขตคำถามเพราะเราจำเป็นต้องแทรก html แบบไดนามิก - แต่ในFฉันทำด้วย 'มือ' (ในทางคงที่) - ในทางทฤษฎี (เท่าที่ฉันรู้) สิ่งนี้ควรเป็น วิธีที่เร็วที่สุดในการแทรกองค์ประกอบ html ใหม่

สรุป

• (อย่าสับสนกับ) เป็นที่เร็วที่สุด (Safari 48k การดำเนินงานต่อวินาที, Firefox 43K สหกรณ์ / วินาที Chrome 23K สหกรณ์ / วินาที) เป็น ~ 31% ช้ากว่าทางออกที่ดีFเพียงโครเมี่ยม แต่ใน Safari และ Firefox ได้เร็วขึ้น ( !) innerHTML =+=
• B innerHTML +=...เป็นที่ช้าที่สุดบนเบราว์เซอร์ (Chrome 95 สหกรณ์ / วินาที, Firefox 88 สหกรณ์ / วินาที Sfari 84 สหกรณ์ / วินาที)
• D jQuery เป็นครั้งที่สองช้าลงบนเบราว์เซอร์ (Safari 14 สหกรณ์ / วินาที, Firefox 11k สหกรณ์ / วินาที Chrome 7k สหกรณ์ / วินาที)
• โซลูชันอ้างอิงF (เร็วที่สุดในทางทฤษฎี) ไม่เร็วที่สุดใน Firefox และซาฟารี (!!!) - ซึ่งน่าแปลกใจ
• เบราว์เซอร์ที่เร็วที่สุดคือ Safari

ข้อมูลเพิ่มเติมเกี่ยวกับสาเหตุที่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>

และหลาย ๆ เส้นอาจมีลักษณะเช่นนี้ 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);