Javascript 不使用document.write动态生成列表？

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

您可以使用

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

var container=document.getElementById（'my-list'），
项目=[]，
附加项；
addItem=函数（文本）{
var elm=document.createElement（'li'）；
elm.innerHTML=文本；
容器.附件（elm）；
项目。推送（elm）；
};
//生成随机列表
var i=0，
j=数学地板（数学随机（）*50）；
对于（i；i

如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);

var items=[‘汽车’、‘玩具’、‘食品’、‘服装’]；
函数呈现（elementId，列表）{
//通过id获取列表持有者
var el=document.getElementById（elementId）；
//创建新的文档片段
var frag=new DocumentFragment（）；
//迭代列表并为其创建新节点
//每个列表项并将其附加到片段
对于（变量i=0，l=list.lenght；i

你能更新你的代码吗？也许不能，但是用

innerHTML

代替

文档。写
应该是可行的。请展示您尝试过的代码。谢谢，createElement正是我所需要的+1Ah，因此，不用多次写入DOM节点，这样我就可以一次完成所有操作了？干杯。是的，从技术上讲，您可以获取一组DOM节点并将它们附加到文档片段，而不是单独附加它们。如前所述，它是该文档的轻量级版本。