插入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所以我写了一个testing:
http://jsperf.com/html-insertion-js-vs-jquery

平原js快10%

4 Solutions collect form web for “插入HTML到一个div”

我想这是你想要的:

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

请记住,在使用IE时,innerHTML对所有types的标签都是不可访问的。 (例如表格元素)

使用JQuery会照顾到浏览器的不一致性。 随着您的项目中包含的jQuery库简单地写:

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

你也可以考虑使用:

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

这将添加您的画廊作为最后一项在选定的股利。 要么:

 $('#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);