使用 Javascript 附加列表

Question

我正在开发一个新项目，它使用大量 ul(无序列表) 元素，其中一些列表共享相同的值，所以我想创建一个 Javascript 函数，通过传递 @987654322 来自动化流程@ 用于函数并返回页面的 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>

这个怎么做？

Answer 1

给定一个值列表以及您要附加的节点，这将为该列表中的每个项目创建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>

Answer 2

这样的？

<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>

Answer 3

试试：

'<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>';
}

等等。我认为方法很明确。