插入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%
我想这是你想要的:
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)">❮</a>\n' + '<a class="next" onclick="plusSlides(1)">❯</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);