Question

所以我有像拼字游戏一样的js游戏。现在，当用户创建一个新单词时，我希望将该单词添加到我页面上div中显示的列表中。问题是我完全不明白，如何保持我的旧单词的创建，并以列表形式插入新格式和所有内容的新单词。

我知道有一个列表标签 -

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

但我无法弄清楚的是如何使用java脚本将该单词作为新的列表条目输入。

我使用js显示由以下语法

创建的单词

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

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

由于

编辑：我还希望列表中的最后一个条目作为我列表中的第一个项目。似乎列表填充了自己，但最新的条目被隐藏，并且列表不会在添加项目时自动向下滚动。 PS：还有人知道如何将CSS生成的俗气滚动条选项替换为自定义滚动条。如果你能指出我正确的方向，那就太棒了！

Answer 1

给出一个清单：

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

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

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

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

Answer 2

我使用jQuery进行dom操作，并会为你推荐相同的内容，它增加了很多可读性和大量简洁（x浏览器友好）的功能。

例如......如果您使用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

Answer 3

基本理念：

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

Answer 4

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

然后，

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

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

Answer 5

对于我的问题的确切解决方案，我从mootools docs中找出了其余部分:)

这个小提琴演示了大部分内容.. http://jsfiddle.net/WngSS/1/

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