Question

我正在使用JavaScript从文本源创建链接列表。使用document.write（），重置/创建一个不可取的新页面。我不知道列表中的项目数量，所以预先组合一个列表并使用innerHTML来设置值似乎“不可行”？如何在JS中生成动态列表？

Answer 1

您可以使用document.createElement动态创建元素。它可以像这样工作：

var container = document.getElementById('my-list'),
    items = [],
    addItem;

addItem = function (text) {
    var elm = document.createElement('li');

    elm.innerHTML = text;
    container.appendChild(elm);
    items.push(elm);
};

// generating random list
var i = 0,
    j = Math.floor(Math.random() * 50);

for (i; i < j; i++) {
    addItem('list item ' + i);
}

Answer 2

正如Matti Mehtonen所说，你可以使用document.createElement()来创建动态元素。关于这一点的一个注意事项是，不是将新创建的元素直接附加到DOMnode中，而是应该创建一个文档片段并将元素附加到它，然后将片段附加到DOMnode。这样一来，流程就会更快。

var items = ['cars', 'toys', 'food', 'apparel'];

function render(elementId, list) {
  //getting the list holder by id
  var el = document.getElementById(elementId);

  //creating a new document fragment
  var frag = new DocumentFragment();

  //iterate over the list and create a new node for
  //each list item and append it to the fragment
  for (var i = 0, l = list.lenght; i < l; i++) {
    var item = document.createElement('span');
    frag.appendChild(item.innerHTML = list[i]);
  }

  //finally append the fragment to the list holder
  el.appendChild(frag);
}

//rendering
render("my-list-holder", list);

动态生成没有document.write的列表？

2 个答案: