如何在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到你想要的身体中的任何一个父元素.

Answer 2

试试这个

var str = '<ul class='xbreadcrumbs' style='position:absolute; bottom:0px'>';

for(var i in $yourArray){
   str += '<li><a href="#">String 1</a></li>';
}

str += '</ul>';

$('body').append(str);