javascript - 如何在 JavaScript 中动态创建无序列表？

Question

我有一个包含一些字符串的全局 JavaScript 数组。

我想根据我的 JavaScript 数组中的字符串创建一个动态列表。类似这样:

<ul class='xbreadcrumbs' style='position:absolute; bottom:0px'>
    <li>
        <a href='#'>String 1</a>
    </li>
</ul>

我如何遍历我的数组，然后在 JavaScript/jQuery 中创建这个列表？

Answer 1

如果您只需要一个平面数组(即不是多维的并且数组中没有数组)，那么您可以在纯 JavaScript 中执行以下操作:

var strs = [ "String 1", "String 2", "String 3" ];
var list = document.createElement("ul");
for (var i in strs) {
  var anchor = document.createElement("a");
  anchor.href = "#";
  anchor.innerText = strs[i];

  var elem = document.createElement("li");
  elem.appendChild(anchor);
  list.appendChild(elem);
}

然后将 list 附加到正文中您想要的任何父元素。