Question

我正在尝试将一大块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％

Answer 1

我认为这就是你想要的：

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

请记住，使用IE时，innerHTML对于所有类型的标记都不可访问。（例如表格元素）

Answer 2

使用JQuery会解决浏览器的不一致问题。使用项目中包含的jquery库，只需编写：

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

您也可以考虑使用：

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

这会将您的图库添加为所选div中的最后一项。或者：

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

这会将其添加为所选div中的第一项。

请参阅这些函数的JQuery文档：

Answer 3

我使用＆＃34; +＆＃34; （加）将div插入html：

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

希望得到这个帮助。

Answer 4

尝试insertAdjacentHTML

let h = '<div id="idChild"> content html </div>';

document.getElementById('container').insertAdjacentHTML('beforeend', h);

<div id="container"></div>

这里是一些小的性能比较-（2018.07.02）Chrome 67.0.3396.99（64位），Safari 11.0.3（13604.5.6），Firefox 59.0.2（64位）上的MacOs High Sierra 10.13.3 ））：

我们可以看到insertAdjacentHTML最快（每秒Safari 117M次操作，Chrome 69M，Firefox 39M），因此普通javascript比jQuery快（在所有浏览器上）。对于所有浏览器，innerHTML +=...的速度都比jQuery慢。

您可以在此处在计算机/浏览器上执行测试：https://jsperf.com/insert-html-to-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);

将HTML插入div

5 个答案: