将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>';

请记住，使用IE时无法访问所有类型的标签的innerHTML。（例如表元素）

使用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 Friday）Chrome 76.0.3809（64位），Safari 12.1.2（13604.5.6）上的MacOs High Sierra 10.13.6， Firefox 69.0.0（64位））。测试F仅供参考-由于我们需要动态插入html，因此不在问题范围内-但在F中，我是通过“手动”操作（以静态方式）-理论上（据我所知）这应该是插入新html元素的最快方法。

摘要

• 的甲 innerHTML =（不要混淆+=）是最快的（野生每秒48K操作，火狐43K运算/秒，铬23K运算/秒）的阿是〜31％速度低于理想的解决方案˚F仅铬，但是，Safari和Firefox更快（ ！）
• 的乙 innerHTML +=...是最慢的所有浏览器（浏览器95的运算/秒，火狐88运算/秒，Sfari 84运算/秒）
• 在所有浏览器中，D jQuery的速度都排名第二（Safari 14 op / sec，Firefox 11k op / sec，Chrome 7k op / sec）
• 参考解决方案F（理论上最快）在Firefox和Safari（!!!）上不是最快的-令人惊讶
• 最快的浏览器是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);