所以，我试图打印一个数组，将用户输入文本添加到其中，但我想要打印的是数组的有序列表。正如您所看到的，（如果您运行我的代码）列表项只是不断将用户输入添加到其中，并且不会添加带有人员姓名的新列表项。
下面是代码：
<!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>
如果您想为每个输入/名称创建一个
lidocument.createElement为列表提供 ID：
<ol id="demo"></ol>
并获取它的参考：
var list = document.getElementById('demo');
在事件处理程序中，创建一个新的列表元素，以输入值作为内容，并使用
Node.appendChildvar firstname = document.getElementById('firstname').value;
var entry = document.createElement('li');
entry.appendChild(document.createTextNode(firstname));
list.appendChild(entry);
尝试这样的事情：
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>' );
存储名字值，然后使用
appendliol上面的答案对我有帮助，但在提交时添加名称可能有用（或最佳实践），正如我最终所做的那样。希望这对某人有帮助。 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>
对于更简单的解决方案，您可以创建一个
<li>document.createElementtextContentappend<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>