將用戶輸入添加到 html 頁面上的文本項列表
[英]adding user input to a list of text items on a html page
問題描述
我有一個帶有提交按鈕的用戶輸入文本框。 我希望用戶能夠輸入一些輸入，並將輸入顯示在輸入框下方的列表中，或者使用某種 javascript 函數放入表格中。 對我來說，這似乎是一個相當簡單的概念，但我找不到任何教程來告訴我如何做到這一點，誰能推薦任何教程或告訴我最好、最吸引人的方法是什么？
編輯-這是我嘗試過的：
<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>
5 個解決方案
解決方案1
4 已采納 2013-11-11 14:07:34
我可以快速瀏覽一下你需要什么。 首先，您需要帶有 ID 的基本文本輸入：
<input type='text' id='idea' />
顯然還有一個按鈕可以添加到列表中：
<input type='button' value='add to list' id='add' />
以及要添加到的列表：
<ul id='list'></ul>
現在對於有趣的 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);
}
解決方案2
3 2017-01-04 11:00:14
下面是完成這項工作的基本 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
<input type="button" id="add" value="Add New">
<ol id="list_item">
</ol>
解決方案3
1 2013-11-11 14:16:20
這是一個基本的jquery實現：
(function($){
$('#myform').submit(function(e){
var val = $('#in').val();
$('ul.list').append('<li>' + val + '</li>');
e.preventDefault();
});
})(jQuery);
解決方案4
0 2019-12-14 07:02:14
<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>
解決方案5
-1 2017-03-22 11:42:39
我認為它有效但不會改變 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);
};
從HTML文本字段向HTML選擇/選項列表添加輸入時，項目消失
[英]Items disappearing when adding input from HTML textfield to HTML Select/Option List
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.