如何通过javascript中的for循环动态创建ul和li元素
how to dynamically create ul and li elements by for loop in javascript
我正试图使用javascript在代码中创建ul和li元素。我的javascript代码:
for (var i =0;i<locations.length;i++)
{
//how to dynamic create ul and li code as follow ul and li code?????
}
ul和li代码:
<li>
<label for="Device"><SCRIPT LANGUAGE="JavaScript"> document.write("show javascript value like the the locations[i]") </SCRIPT></label> <input type="checkbox" id="Device" />
<ol>
<li class="file"><a href="">File 1</a></li>
<li>
<label for="subfolder2">Subfolder 1</label> <input type="checkbox" id="subfolder2" />
<ol>
<li class="file"><a href="">Subfile 1</a></li>
<li class="file"><a href="">Subfile 2</a></li>
<li class="file"><a href="">Subfile 3</a></li>
<li class="file"><a href="">Subfile 4</a></li>
<li class="file"><a href="">Subfile 5</a></li>
<li class="file"><a href="">Subfile 6</a></li>
</ol>
</li>
</ol>
</li>
检查here
。。。
脚本:
var ul = document.createElement("ul");
document.body.appendChild(ul);
for (var i = 1; i <= 10; i++)
{
var li = document.createElement("li");
li.className = "file";
var a = document.createElement("a");
a.innerHTML = "Subfile " + i;
li.appendChild(a);
ul.appendChild(li);
}
这样你就可以创建你想要的订单。。
请检查示例
HTML
<li>
<label for="Device"><SCRIPT LANGUAGE="JavaScript"> document.write("show javascript value like the the locations[i]") </SCRIPT></label> <input type="checkbox" id="Device" />
<ol>
<li class="file"><a href="">File 1</a></li>
<li>
<label for="subfolder2">Subfolder 1</label> <input type="checkbox" id="subfolder2" />
<div id='mi'></div>
</li>
</ol>
</li>
JS
var text = '<ol>';
for (var i =0;i<6;i++)
{
text = text + "<li class='file'><a href=''>Subfile " + i + "</a></li>";
}
text = text +'</ol>';
document.getElementById('mi').innerHTML=text;
在这里,我已经将<LI>
放入js中的for循环中,并将其存储到变量中,然后将其设置在div html上。
我刚刚回答了一个类似的问题,早些时候,看一下我在这里使用一些jQueries效果的例子。
var list = $('#theList li:last-child'),
limit = 20,
current = 0;
function rand() {
return Math.random().toString(36).substr(2); // Just for some random contnt
}
$('#trigger').click(function() { // We're using a static button to start the population of the list
var end = setInterval(function() {
if ( current == limit ) {
current = 0;
clearInterval(end);
}
list.append('<li style="display:none;color:green;">' + rand() + '</li>');
var newList = $('#theList li:last-child');
newList.fadeIn();
var colorEnd = setInterval(function() {
newList.css('color', 'black');
clearInterval(colorEnd);
}, 350);
current = current + 1;
}, 300);
});
相关文章:
- 使用jquery动态创建ul-li
- 创建带有文本输入和按钮的 UL 列表
- 点击<ul>创建更多<李>下面的名字
- 在 javascript 中创建 ul 和 li 元素
- 如何从 d3 节点层次结构创建 ul-li 列表
- Html5和Css如何创建单独的ul-li并移动<旁白>向左
- JavaScript:创建嵌套UL的递归函数
- 创建UL列以列出所选和上传文件中的文件
- 使用jQuery创建一个用JSON的键和值填充的UL
- 如何用JSON中的值填充UL's列表项而不创建重复项?
- 如何创建嵌套的li-ul-li元素
- 如何在jquery中为n级菜单动态创建ul列表
- html中的UL LI标签创建空白空间
- 基于菜单项的URL路径结构创建一个嵌套的UL菜单
- 动态创建ul-li导航
- 如何动态创建多个ul列表
- 如何通过javascript中的for循环动态创建ul和li元素
- 在由JavaScript创建的ul和li元素之间添加一个空格
- 创建水平滚动UL
- 清除动态创建的<ul>