所以我只是测试JavaScript的基本功能。我试图在<li>
内设置<ul>
,但由于一些简单的原因,我的li
被放置在ul
之外。
var test = document.getElementById('testdiv');
var data = [1,2,3,4,5];
test.innerHTML += '<ul>';
for (var i = 0; i < data[i]; i++)
{
test.innerHTML += '<li>' + i + '=' + data[i] + '</li>';
}
test.innerHTML += '</ul>';
.start{
border: 1px solid #000;
}
<div class="start" id="testdiv"></div>
目前的html
结果如下:
<div class="start" id="testdiv">
<ul></ul>
<li>0=1</li>
<li>1=2</li>
<li>2=3</li>
<li>3=4</li>
<li>4=5</li>
</div>
我们非常感谢预期的结果和一个简单的解释。
<div class="start" id="testdiv">
<ul>
<li>0=1</li>
<li>1=2</li>
<li>2=3</li>
<li>3=4</li>
<li>4=5</li>
</ul>
</div>
@MikeChristensen explains为什么在innerHtml
循环中使用for
是不好的做法。
每次设置innerHTML时,都必须解析HTML,构造DOM并将其插入到文档中。
尝试使用临时字符串变量:
var myList = '<ul>';
for (var i = 0; i < data[i]; i++) {
myList += '<li>' + i + '=' + data[i] + '</li>';
}
myList += '</ul>';
test.innerHTML = myList;
您可以使用下面的方法,而不是使用上述方法。
可能的原因是浏览器可能会自动将结束标记添加到已打开的标记中。
var test = document.getElementById('testdiv');
var data = [1,2,3,4,5];
var ulelement = document.createElement("ul");
for (var i = 0; i < data[i]; i++)
{
ulelement.innerHTML += '<li>' + i + '=' + data[i] + '</li>';
}
test.appendChild(ulelement);
.start{
border: 1px solid #000;
}
<div class="start" id="testdiv"></div>
改用appendChild()
方法:
var test = document.getElementById('testdiv');
var ul = document.createElement('UL');
var data = [1,2,3,4,5];
for (var i = 0; i < data[i]; i++)
{
var li = document.createElement('LI');
li.innerHTML = i + '=' + data[i];
ul.appendChild(li);
}
test.appendChild(ul)
.start{
border: 1px solid #000;
}
<div class="start" id="testdiv"></div>