使用Js更新HTML列表

Question

我有一个类似于Scrabble的JavaScript游戏。现在，当用户创建一个新单词时，我希望该单词被添加到一个列表中，并显示在页面上的div中。

问题是，我不太明白如何保留旧的单词并以列表形式插入新格式化的新单词。

我知道有一个列表标签--

<ul>
     <li>apple</li>
     <li>ball</li>
</ul>

但我真正想不明白的是如何使用JavaScript将单词输入为新的列表项。我已经使用JavaScript来显示以下语法创建的单词：

document.getElementById('currentword').innerHTML = word;

其中，word是保存当前单词的变量，currentword是div id。但我如何在列表中使用这种语法呢？请帮帮我！

谢谢。

编辑：我还希望将列表的最后一个条目作为列表中的第一项。似乎列表会自动填充，但最新的条目被隐藏了，而且随着条目的添加，列表并不会自动滚动到底部。 另外，如果有人知道我如何用自定义滚动条替换CSS生成的那个难看的滚动条选项，能否指点我一下正确的方向！

- Shouvik

Answer 1

给定一个列表：

<ul id="theList" >
     <li>apple</li>
     <li>ball</li>
</ul>

您可以像这样添加一个<li>（假设变量word包含您想要添加的单词）：

document.getElementById('theList').innerHTML += ('<li>'+word+'</li>');

还有其他方法，但这可能是最简单的方法。

- Lee

---

谢谢... 顺便问一下，如果我想在这个上面引入CSS效果，用类替换ID会有帮助，然后调用样式就可以了对吧？ - Shouvik

如果你用 class 替换 id，那么 getElementById() 就无法再找到 ul 元素了。虽然有 getElementsByClassName()，但它的工作方式略有不同。当然，id 和 class 可以同时存在于同一个标签上（像这样：<ul id="theList" class="someClass">）。这将允许你通过 class 应用 CSS 规则，并仍然可以使用 getElementById() 从 JavaScript 中检索元素。如果你正在进行高级效果或动画，尝试使用 jQuery 这样的框架可能会更容易些。 - Lee

谢谢Lee。实际上我正在使用Mootools作为我的框架，所以我不想包含另一个框架。:)但是我已经使用CSS3创建了所有我想要的效果的类，所以我只是在想，如果我可以以同样的方式将动画呈现到DOM上的div中。我提到的另一个问题是我希望列表中的最后一个条目成为列表中的第一项。如果你能解决这个问题就太好了！谢谢... :) - Shouvik

一旦列表变得很长，性能就会变差。你不是只添加一个元素，而是不断地重绘所有这些元素。 - epascarello

@epascarello：是的，就像我说的：“还有其他方法，但这可能是最简单的一种。” 最简单，并不代表最佳性能。 - Lee

Answer 2

我使用 jQuery 进行 DOM 操作，也建议您使用它，它可以增加可读性并提供大量整洁的（跨浏览器兼容的）功能。

例如... 如果您正在使用 jQuery，则可以使用 append API 调用来完成工作。

<ul id="words">
 <li>Some Word</li>
 <li>Another Word</li>
</ul>

$("#words").append("<li>" + yourNewWord + "</li>");

或者使用纯JavaScript...

document.getElementById('words').innerHTML += '<li>' + yourNewWord + '</li>';

编辑：我相信在 motools 中，等同于 .append 的是 .grab

- Derek Adair

---

我目前正在使用mootools，不想引入另一个库...但还是谢谢你的帮助 :) - Shouvik

有没有办法在某些条目中去除项目符号，同时保留其他条目的项目符号？ - Shouvik

就一个问题……我怎样才能让最新的列表条目显示在列表顶部？现在它们被追加到列表底部！谢谢… - Shouvik

Answer 3

基本思路：

var li = document.createElement("li");
li.innerHTML = "new text";
document.getElementById("TheULsId").appendChild(li);

- epascarello

Answer 4

<ul>
 <li>apple</li>
 <li>ball</li>
</ul>

那么，

var newListItem = $('<li></li>').html("myNewWord");

$("ul").append(newListItem);

- Robin Maben

Answer 5

针对我的问题得到确切的解决方案，我从 mootools 文档中找到了其余的答案 :)

这个 fiddle 已经演示了大部分内容.. http://jsfiddle.net/WngSS/1/

至于滚动条，如果想要自定义你自己的滚动条，只需使用 css 效果即可。

- Shouvik