Question

我有一个用户输入的文本框，带有提交按钮。我希望用户能够输入一些输入，并将输入显示在输入框下面的列表中，也可以使用某种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>

Answer 1

我可以快速浏览一下你需要的内容。首先，您需要使用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);
}

Answer 2

这是一个基本的jquery实现：

(function($){
    $('#myform').submit(function(e){
        var val = $('#in').val();
        $('ul.list').append('<li>' + val + '</li>');
        e.preventDefault();
    });
})(jQuery);

http://jsfiddle.net/MW8HS/

Answer 3

以下是完成这项工作的基本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>

Answer 4

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

Answer 5

我认为它有效但不能改变李风格：

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页面上的文本项列表

5 个答案: