通过 JavaScript 添加列表项答案

【问题标题】：Add a list item through JavaScript通过 JavaScript 添加列表项
【发布时间】：2013-07-21 15:30:48
【问题描述】：

所以，我正在尝试打印一个数组，该数组将用户输入文本添加到其中，但我想要打印的是数组的有序列表。如您所见，（如果您运行我的代码）列表项只是不断将用户输入添加到其中，并且没有添加带有人名的新列表项。

下面是代码：

 <!DOCTYPE html>
 <html>
 <head>
 First name: <input type="text" id="firstname"><br> 

 <script type="text/javascript">
 var x= [];

 function changeText2(){
var firstname = document.getElementById('firstname').value;
document.getElementById('boldStuff2').innerHTML = firstname;
x.push(firstname);
document.getElementById('demo').innerHTML = x;
 }
 </script>

 <p>Your first name is: <b id='boldStuff2'></b> </p> 
 <p> Other people's names: </p>
 
 <ol>
     <li id = "demo"> </li> 
 </ol>

 <input type='button' onclick='changeText2()'   value='Submit'/> 

 </head>
 <body>
 </body>
 </html>

【问题讨论】：

<head> 仅包含元信息和资源链接，不包含实际内容。但是，您没有获得新列表项的原因是您没有创建一个。

标签： javascript dom

【解决方案1】：

如果您想为每个输入/名称创建一个 li 元素，那么您必须使用 document.createElement ^[MDN] 创建它。

为列表提供 ID：

<ol id="demo"></ol>

并获得对它的引用：

var list = document.getElementById('demo');

在您的事件处理程序中，使用输入值作为内容创建一个新列表元素，并使用Node.appendChild ^[MDN] 附加到列表中：

var firstname = document.getElementById('firstname').value;
var entry = document.createElement('li');
entry.appendChild(document.createTextNode(firstname));
list.appendChild(entry);

DEMO

【讨论】：

我希望向 li 添加文本会更简单，例如 entry.text ='foo'。为什么我需要textnode？
@Timo：我已经有一段时间没有写这个答案了。我不记得我为什么那样做。但是，是的，你绝对可以做到entry.textContent = firstname;。
谢谢 Felix，我根据你的代码做了一个嵌套列表，比如 ul-li-ul-li-/li-/ul-/li-/ul。我可以想象当列表变大时会有递归，你认为这里的问题有意义吗？
@Timo：我先四处看看。我想在如何从数据创建嵌套列表之前有人问过它。
here 是一个可以改进的例子。here 是一个嵌套循环，但不是我想要的。我明天去答题。

【解决方案2】：

试试这样的：

var node=document.createElement("LI");
var textnode=document.createTextNode(firstname);
node.appendChild(textnode);
document.getElementById("demo").appendChild(node);

小提琴：http://jsfiddle.net/FlameTrap/3jDZd/

【讨论】：

【解决方案3】：

我最近遇到了同样的挑战，偶然发现了这个线程，但使用 append 找到了一个更简单的解决方案...

var firstname = $('#firstname').val();

$('ol').append( '<li>' + firstname + '</li>' );

存储名字值，然后使用append 将该值作为li 添加到ol。我希望这会有所帮助:)

【讨论】：

我没有。那是问题吗？这实际上是我在 SO 上提交的第一个答案。对此很新。只是想帮忙。感谢您的意见。
@JesseNovotny 感谢您的回答。它确实帮助了我。

【解决方案4】：

上述答案对我有帮助，但在提交时添加名称可能有用（或最佳实践），因为我最终这样做了。希望这对某人有所帮助。 CodePen Sample

    <form id="formAddName">
      <fieldset>
        <legend>Add Name </legend>
            <label for="firstName">First Name</label>
            <input type="text" id="firstName" name="firstName" />

        <button>Add</button>
      </fieldset>
    </form>

      <ol id="demo"></ol>

<script>
    var list = document.getElementById('demo');
    var entry = document.getElementById('formAddName');
    entry.onsubmit = function(evt) {
    evt.preventDefault();
    var firstName = document.getElementById('firstName').value;
    var entry = document.createElement('li');
    entry.appendChild(document.createTextNode(firstName));
    list.appendChild(entry);
  }
</script>

【讨论】：