将用户输入添加到 html 页面上的文本项列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19908215/
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
adding user input to a list of text items on a html page
提问by bookthief
I have a textbox for user input with a submit button. I would like for the user to be able to put in some input, and have the input appear in a list underneath the input box, maybe into a table using some kind of javascript function. To me this seems like a fairly simple concept but I can't find any tutorials that will show me how to do it, can anyone recommend any or tell me what the best, most attractive looking approach to this would be?
我有一个带有提交按钮的用户输入文本框。我希望用户能够输入一些输入，并将输入显示在输入框下方的列表中，或者使用某种 javascript 函数放入表格中。对我来说，这似乎是一个相当简单的概念，但我找不到任何教程来告诉我如何做到这一点，谁能推荐任何教程或告诉我最好、最吸引人的方法是什么？
EDIT- Here's what I've tried:
编辑-这是我尝试过的：
<html>
<head>
</head>
<body>
<script type="text/javascript">
document.getElementById("add").onClick = function() {
var text = document.getElementById("idea").value;
var li = "<li>" + text + </li>;
document.getElementById("list").appendChild(li);
}
</script>
<input type='text' id = 'idea' />
<input type='button' value = 'add to list' id = 'add'>
<ul id= 'list'>
<li> <b>Topics</b></li>
</ul>
</body>
</html>
回答by tymeJV
I can give a quick run through of what you'll need. First, you'll want your basic text input with an ID:
我可以快速浏览一下您需要什么。首先，您需要带有 ID 的基本文本输入：
<input type='text' id='idea' />
And obviously a button to add to the list:
显然还有一个按钮可以添加到列表中：
<input type='button' value='add to list' id='add' />
And a list to be adding to:
以及要添加到的列表：
<ul id='list'></ul>
Now for the fun JS, see the play-by-play in the comments
现在对于有趣的 JS，请查看评论中的播放
//Defining a listener for our button, specifically, an onclick handler
document.getElementById("add").onclick = function() {
//First things first, we need our text:
var text = document.getElementById("idea").value; //.value gets input values
//Now construct a quick list element
var li = "<li>" + text + "</li>";
//Now use appendChild and add it to the list!
document.getElementById("list").appendChild(li);
}
回答by Bn Mk
here is a basic jquery implementation:
这里是一个基本的jQuery实现：
(function($){
$('#myform').submit(function(e){
var val = $('#in').val();
$('ul.list').append('<li>' + val + '</li>');
e.preventDefault();
});
})(jQuery);
回答by Santosh
Below is the basic JavaScript code that will do the job.
下面是完成这项工作的基本 JavaScript 代码。
document.getElementById("add").onclick = function() {
var node = document.createElement("Li");
var text = document.getElementById("user_input").value;
var textnode=document.createTextNode(text);
node.appendChild(textnode);
document.getElementById("list_item").appendChild(node);
}
HTML
HTML
<input type="button" id="add" value="Add New">
<ol id="list_item">
</ol>
回答by Deva GAikwad
<input type='text' id='idea'>
<input type="button" id="add" value="Add New">
<script>document.getElementById("add").onclick = function() {
var node = document.createElement("Li");
var text = document.getElementById("idea").value;
var textnode=document.createTextNode(text);
node.appendChild(textnode);
document.getElementById("list").appendChild(node);
}
</script>
<ul id='list'></ul>
回答by Istvan Dembrovszky
I think it work but not changing li style:
我认为它有效但不会改变 li 风格：
document.getElementById('add').onclick = function(){
var text = document.getElementById('idea').value;
var node = document.createElement("li");
var textNode = document.createTextNode(text);
node.appendChild(textNode);
document.getElementById('list').appendChild(node);
};
