通过JavaScript添加列表项

Add a list item through JavaScript

本文关键字：列表 添加 JavaScript 通过      更新时间：2023-09-26

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

下面是代码：

 <!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>

如果要为每个输入/名称创建一个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

试试这样的东西：

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

Fiddle：http://jsfiddle.net/FlameTrap/3jDZd/

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

var firstname = $('#firstname').val();
$('ol').append( '<li>' + firstname + '</li>' );

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

上面的答案对我很有帮助，但在提交时添加名称可能会很有用（或最佳实践），就像我最终所做的那样。希望这对某人有所帮助。CodePen样品

    <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>
相关文章：