javascript 通过javascript添加列表项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17773938/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add a list item through javascript
提问by user2581598
So, I am trying to print out an array that gets user input text added to it, but what I want to print out is an ordered list of the array. As you can see, (if you run my code) the list item just keeps getting the user input added to it, and no new list items are added with people's names. Please help! Here is the code below:
所以，我试图打印出一个将用户输入文本添加到其中的数组，但我想要打印的是数组的有序列表。如您所见，（如果您运行我的代码）列表项只是不断地将用户输入添加到其中，并且不会添加带有人名的新列表项。请帮忙！这是下面的代码：
<!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>
回答by Felix Kling
If you want to create a lielement for each input/name, then you have to create it, with document.createElement[MDN].
如果要li为每个输入/名称创建一个元素，则必须使用document.createElement[MDN]创建它。
Give the list the ID:
为列表提供 ID：
<ol id="demo"></ol>
and get a reference to it:
并获得对它的引用：
var list = document.getElementById('demo');
In your event handler, create a new list element with the input value as content and append to the list with Node.appendChild[MDN]:
在您的事件处理程序中，使用输入值作为内容创建一个新的列表元素，并使用Node.appendChild[MDN]附加到列表中：
var firstname = document.getElementById('firstname').value;
var entry = document.createElement('li');
entry.appendChild(document.createTextNode(firstname));
list.appendChild(entry);
回答by Flame Trap
Try something like this:
尝试这样的事情：
var node=document.createElement("LI");
var textnode=document.createTextNode(firstname);
node.appendChild(textnode);
document.getElementById("demo").appendChild(node);
回答by Jesse Novotny
I was recently presented with this same challenge and stumbled on this thread but found a simpler solution using append...
我最近遇到了同样的挑战并偶然发现了这个线程，但找到了一个使用 append 的更简单的解决方案......
var firstname = $('#firstname').val();
$('ol').append( '<li>' + firstname + '</li>' );
Store the firstname value and then use appendto add that value as an lito the ol. I hope this helps :)
存储 firstname 值，然后用于append将该值作为 an 添加li到ol. 我希望这有帮助 ：）
回答by inkpixelspaper
The above answer was helpful for me, but it might be useful (or best practice) to add the name on submit, as I wound up doing. Hopefully this will be helpful to someone. 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>
