通过JavaScript添加列表项

Question

通过JavaScript添加列表项

38

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

以下是代码：

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

- user2581598

1

<head> 只包含元信息和资源链接，而不是实际内容。但是，你没有创建一个新的列表项，这就是你没有得到新列表项的原因。 - Felix Kling

5个回答

6

尝试类似于这样的内容：

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

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

- Josh

5

最近我遇到了同样的挑战，看到了这个帖子，但是我发现了一种更简单的解决方案，使用append方法...

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

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

存储firstname的值，然后使用append将该值作为li添加到ol中。希望这可以帮助您 :)

- Jesse Novotny

1

上面的答案对我有帮助，但可能最好的做法是在提交时添加名称，就像我最终做的一样。希望这对某个人有用。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>

- inkpixelspaper

0

为了更简单的解决方案，你可以创建一个 <li>（使用 document.createElement），设置它的 textContent，然后将其 append 到 <ol> 中。

const list = document.querySelector('ol');
list.append(Object.assign(document.createElement('li'), {textContent: firstname}));

演示：

document.querySelector('button').addEventListener('click', e => {
  const firstname = document.querySelector('#firstname').value;
  const list = document.querySelector('ol');
  list.append(Object.assign(document.createElement('li'), {textContent: firstname}));
});

<label>First name: <input id="firstname"></label> <button>Submit</button>
<ol></ol>

- Unmitigated

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Felix Kling · Accepted Answer

如果你想为每个输入名称创建一个 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);

演示