我必须创建以下类型的HTML结构:
<div id="dcontent">
<ul class="thm">
<li><a href="#"><img src="img/theme1.jpg" id="t1" border="none"/></a></li>
<li><a href="#"><img src="img/theme2.jpg" id="t2" border="none"/></a></li>
<li><a href="#"><img src="img/theme3.jpg" id="t3" border="none"/></a></li>
我需要以这种方式创建18个嵌套图像,因此我使用以下Javascript循环:
for (var count = 1; count < 19; count++) {
newLi = document.createElement('li');
newLi.setAttribute('id', 'l' + count);
newLink = document.createElement('a');
newLink.setAttribute('href', '#');
newLink.setAttribute('id', 'a' + count);
$(newLink).appendTo('#l' + count);
newImg = document.createElement('img');
newImg.setAttribute('src', thumbPath + count + '.jpg');
newImg.setAttribute('id', 't' + count);
newImg.setAttribute('border', 'none');
$(newImg).appendTo('#a' + count);
$(newLi).appendTo('.thm');
}
代码仅输出li
嵌套在ul
中,div
嵌套在document.createElement
中。使用jQuery是否更好,因为我读到{{1}}(纯Javascript)是更快的方法。任何帮助将不胜感激。
答案 0 :(得分:3)
你根本不需要任何jQuery。
您也可以使用
替换appendTo
功能
var parent = document.getElementById("id");
parent.appendChild(child);
答案 1 :(得分:1)
jQuery是一组用于简化JavaScript工作的抽象。这意味着您将执行额外的逻辑来执行相同的任务。
您需要在运行时的性能和开发所需的时间之间找到平衡。
答案 2 :(得分:1)
var $thm = $('.thm');
for(var count=1; count<19; count++)
{
var $li = $('<li><a href="#"><img src="img/theme' + count + '.jpg" id="t' + count + '" border="none"/></a></li>')
$thm.append($li);
}