通过JavaScript添加列表项_Javascript_Dom

通过JavaScript添加列表项

javascript dom

通过JavaScript添加列表项,javascript,dom,Javascript,Dom,所以，我试图打印出一个数组，该数组添加了用户输入文本，但我想打印出的是数组的有序列表。如您所见，（如果您运行我的代码），列表项只是不断地将用户输入添加到列表项中，并且没有添加带有人名的新列表项代码如下： <!DOCTYPE html> <html> <head> First name: <input type="text" id="firstname"><br> <scrip

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

代码如下：

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


名字：

var x=[]；
函数changeText2（）{
var firstname=document.getElementById（'firstname'）。值；
document.getElementById（'boldStuff2'）。innerHTML=firstname；
x、 推送（名字）；
document.getElementById（'demo'）.innerHTML=x；
}
您的名字是：
其他人的姓名：

如果要为每个输入/名称创建一个

li

元素，则必须使用创建它

为列表提供ID：

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

在事件处理程序中，创建一个新的列表元素，将输入值作为内容，并使用以下内容附加到列表中：

试试这样的方法：

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

Fiddle:

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

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

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

var firstname=$（'#firstname'）.val（）；
$（'ol'）。追加（''+firstname+''）；

存储firstname值，然后使用

append

将该值作为

li

添加到

ol

。我希望这能有所帮助：）

上面的答案对我很有帮助，但在提交时添加名称（或最佳实践）可能会很有用，因为我最后这样做了。希望这将有助于某人


添加名称
名字
添加
var list=document.getElementById（'demo'）；
var entry=document.getElementById（'formAddName'）；
entry.onsubmit=函数（evt）{
evt.preventDefault（）；
var firstName=document.getElementById（'firstName'）。值；
var entry=document.createElement（'li'）；
entry.appendChild（document.createTextNode（firstName））；
列表。追加子项（条目）；
}

仅包含元信息和指向资源的链接，而不包含实际内容。但是，您没有获得新列表项的原因是您没有创建列表项，我没有。这是个问题吗？这是我第一次提交答案。对这件事很陌生。只是想帮忙。谢谢你的意见。@JesseNovotny谢谢你的回答。它确实帮了我的忙。我会解释说，使用entry.text='foo'之类的东西向li添加文本会更简单。为什么我需要一个

textnode

？@Timo:我已经有一段时间没有写那个答案了。我不记得我为什么那样做了。但是是的，你完全可以做

entry.textContent=firstname。谢谢Felix，我根据你的代码做了一个嵌套列表，比如ul-li-ul-li-/li-/ul-/li-/ul。我可以想象，当列表变大时，会出现递归现象，你认为这里的问题有意义吗？@Timo：我会先四处看看。我想以前有人问过它如何从数据创建嵌套列表。这是一个可以改进的例子。是一个嵌套循环，但不是我想要的。我明天去参加考试。
var node=document.createElement("LI");
var textnode=document.createTextNode(firstname);
node.appendChild(textnode);
document.getElementById("demo").appendChild(node);

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

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

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