在 div 中插入 HTML

我试图将一大块 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，所以我写了一个测试:
Https://jsben.ch/fbqym

普通的 js 快了10%

607760 次浏览
小开
最佳答案

我想这就是你想要的:

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

请记住，在使用 IE 时，innerHTML 并不适用于所有类型的标记(例如 table 元素)

小开

使用 JQuery 可以解决浏览器不一致的问题:

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

你亦可考虑使用:

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

这将添加您的库作为所选 div 中的最后一项。或者:

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

这将把它添加为所选 div 中的第一个项。

有关这些函数，请参阅 JQuery 文档:

小开

我使用“ +”(加号)将 div 插入 html:

document.getElementById('idParent').innerHTML += '<div id="idChild"> content html </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);
小开

作为替代方案，你可以使用 插入邻接 HTML——不过我会深入研究并做一些性能测试——(2019.09.13 Friday) MacOs High Sierra 10.13.6 on Chrome 76.0.3809(64-bit) ，Safari 12.1.2(13604.5.6) ，Firefox 69.0.0(64-bit))。测试 F只是为了参考-它超出了问题的范围，因为我们需要动态插入 html-但是在 F中我用“手工”(静态方式)-理论上(据我所知)这应该是插入新 html 元素的最快方式。

enter image description here

总结

  • A innerHTML =(不要和 +=混淆)是最快的(Safari 48k 每秒运算，Firefox 43k 每秒运算，Chrome 23k 每秒运算) A比理想的解决方案 F慢31% ，但在 Safari 和 Firefox 上更快(!)
  • B innerHTML +=...在所有浏览器中都是最慢的(Chrome 95运算/秒，Firefox 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>

小开 
document.getElementById('tag-id').insertAdjacentHTML("beforebegin",'<ol><li>html data</li></ol>')

Before start: 在元素本身之前
‘ after start’: 就在元素内部，在它的第一个子元素之前
Before: 就在元素内部，在它的最后一个子元素之后
After: 元素本身之后

更多细节: Developer.mozilla.org/en-us/docs/web/api/element/insertadjacenthtml


提交答案