javascript - jQuery : using a loop to create many elements with images and html

Question

我有一个这样的循环:

for (i = 0; i < number; i++) {
     // retrieve several pieces of information each time which will be result[0], result[1] etc.
     p = document.createElement('p')
     p.className = 'box'
     p.innerHTML = '<img src="http://website.com/1.png" width="80%" height="100%"</a>' + result[0] + '<h5> more html etc... </h5>'
     maintable.appendChild(p) 
}

如果 i，我需要根据值更改图像(对于 website.com/1.png 为 i=0，对于 website.com/2.png 等为 i=1)并在其后附加 HTML，其中将包含 result[0] , result[1]循环获取的等等。

我试过添加 id到图像然后做('#id').attr('src', 'http://website.com/' + (i + 1) + '.png')在循环结束时，但这没有按预期工作。我也试过使用 p.append对于我需要添加的所有内容(而不是一个 innerHTML )，但这忽略了 HTML，例如。 p.append("<h5>Object #1</h5>")将在页面上显示 h5 标签。

我已经查看了通过循环添加多个图像的答案，但没有让它们在这种特定情况下工作。

这应该如何最好地完成？

Answer 1

我认为你的问题是 (i+1)。这会将您的表达式变成一个整数。只需使用没有数学表达式的 i 。这个我试过了

p.innerHTML = '<img src="http://hippopool.com/media/'+i+'.jpg" width="600" height="100"><h5>more html etc</h5>';

不要忘记用分号结束你的 javascript 行。