我尝试新的元素添加到无序列表用下面的代码:添加新的列表元素的无序列表使用Javascript
的HTML:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Javascript</title>
<link rel="stylesheet" href="jsPlay.css" type="text/css" />
<script src="jsPlay.js"></script>
</head>
<body>
<ul id="numberList"></ul>
</body>
</html>
的JavaScript:
window.onload = function()
{
//alert("Window is loaded");
var numberList = document.getElementById("numberList");
//for every number between 100 and 200
for(var i = 0; i > 100 && i < 200; i++)
{
if (i % 17 == 0 && i % 2 == 0) //if number evenly divisible by 17 and 2
{
//create new li element
var newNumberListItem = document.createElement("li");
//create new text node
var numberListValue = document.createTextNode(i);
//add text node to li element
newNumberListItem.appendChild(numberListValue);
//add new list element built in previous steps to unordered list
//called numberList
numberList.appendChild(newNumberListItem);
}
}
}
当我在浏览器中执行此操作时,我只得到了空白区域。我检查FireBug(在Firefox 15.0.1上)以查看是否有任何错误,但没有任何明显的迹象。我认为我没有正确地将某些东西绑定在一起 - 这看起来像是一个基本问题,但我似乎无法弄清楚为什么这些元素没有被添加到无序列表中。
我确定在Javascript代码中的评论是足够的,但如果不是,请随时问我问题。
非常感谢您的帮助:)。
在这里你有一些性能问题。您应该使用“var dc = document.createDocumentFragment()”,并且在将所有列表元素添加到“dc”之后,您应该一次将html片段添加到列表中。 – DevWL