我正在开发一个使用大量ul
(无序列表)元素的新项目,其中一些列表共享相同的值,因此我想通过传递一个Javascript函数来自动化该过程函数array
并返回页面的HTML。像这样:
<h1>Test Page</h1>
List fruits:
<script type="text/javascript" charset="utf-8">
var fruits = ["Banana", "Apple", "Pear", "Strawberry", "Lemon"];
do_list(fruits);
</script>
那应该产生:
<h1>Test Page</h1>
List fruits:
<ul>
<li>Banana</li>
<li>Apple</li>
<li>Pear</li>
<li>Strawberry</li>
<li>Lemon</li>
</ul>
如何制作?
答案 0 :(得分:4)
给定一个值列表以及您要添加的节点,这将为该列表中的每个项目创建li
个标记。
function do_list(arr, ulNode)
{
for(var i = 0; i < arr.length; i++)
{
var node = document.createNode("li");
node.nodeValue = arr[i];
ulNode.appendNodes(node);
}
}
这是一个更好的版本,它允许您创建任意节点类型 - 您可以将td
作为tagName
传递给tr
作为parentNode
,它会填充表格行。
function do_list(arr, parentNode, tagName)
{
if(!tagName)tagName="li";
for(var i = 0; i < arr.length; i++)
{
var node = document.createNode(tagName);
node.nodeValue = arr[i];
parentNode.appendNodes(node);
}
}
使用示例:
<h1>Test Page</h1>
List fruits:
<ul id="list">
<li>Banana</li>
<li>Apple</li>
<li>Pear</li>
<li>Strawberry</li>
<li>Lemon</li>
</ul>
<script type="text/javascript">
do_list(["Banana", "Apple", "Pear", "Strawberry", "Lemon"],
document.getElementById("list"))
</script>
答案 1 :(得分:0)
这样的东西?
<script type="text/javascript">
function do_list(arr) {
var out = '<ul>';
for (var k=0; k < arr.length; k++) {
out += '<li>' + arr[k] + '</li>';
}
out += '</ul>';
return out;
}
var fruits = ["Banana", "Apple", "Pear", "Strawberry", "Lemon"];
document.write(do_list(fruits));
</script>
答案 2 :(得分:0)
尝试:
'<ul><li>' + fruitsArray.join('<li>') + '</ul>';
或作为一种功能:
function arrayToList(array) {
return '<ul><li>' + array.join('<li>') + '</ul>';
}
或者如果你真的想要封闭的LI标签(这是可选的,在任何浏览器中都不是必需的):
function arrayToList(array) {
return '<ul><li>' + array.join('</li><li>') + '</li></ul>';
}
如果你想把它放在某个元素中:
function arrayToContainedList(container, array) {
container.innerHTML = '<ul><li>' + array.join('</li><li>') + '</li></ul>';
}
等等。我认为这种方法很明确。