Javascript 向html页面上的文本项列表添加用户输入_Javascript_Html

Javascript 向html页面上的文本项列表添加用户输入

javascript html

Javascript 向html页面上的文本项列表添加用户输入,javascript,html,Javascript,Html,我有一个文本框，用于用户输入，带有提交按钮。我希望用户能够输入一些输入，并将输入显示在输入框下面的列表中，或者使用某种javascript函数将其放入表中。对我来说，这似乎是一个相当简单的概念，但我找不到任何教程可以告诉我如何做到这一点，有人能推荐任何或告诉我什么是最好的，最有吸引力的方法，这将是编辑-以下是我尝试过的内容： <html> <head> </head> <body> <script type="text/javasc

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


document.getElementById（“add”）.onClick=function（）{
var text=document.getElementById（“idea”）.value；
var li=“”+文本+；
文件.getElementById（“列表”）.appendChild（li）；
}

主题

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

//为按钮定义侦听器，特别是onclick处理程序
document.getElementById（“add”）.onclick=function（）{
//首先，我们需要我们的文本：
var text=document.getElementById（“idea”）.value；//.value获取输入值
//现在构造一个快速列表元素
var li=“”+文本+””；
//现在使用appendChild并将其添加到列表中！
文件.getElementById（“列表”）.appendChild（li）；
}

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

//为按钮定义侦听器，特别是onclick处理程序
document.getElementById（“add”）.onclick=function（）{
//首先，我们需要我们的文本：
var text=document.getElementById（“idea”）.value；//.value获取输入值
//现在构造一个快速列表元素
var li=“”+文本+””；
//现在使用appendChild并将其添加到列表中！
文件.getElementById（“列表”）.appendChild（li）；
}

以下是一个基本的jquery实现：

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

（函数（$）{
$（'#myform'）。提交（函数（e）{
var val=$（'#in'）.val（）；
$（'ul.list'）。追加（''+val+''）；
e、 预防默认值（）；
});
})（jQuery）；

以下是一个基本的jquery实现：

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

（函数（$）{
$（'#myform'）。提交（函数（e）{
var val=$（'#in'）.val（）；
$（'ul.list'）。追加（''+val+''）；
e、 预防默认值（）；
});
})（jQuery）；

下面是完成此任务的基本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

下面是完成此任务的基本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

我认为这是可行的，但不会改变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);
};

我认为这是可行的，但不会改变李的风格：

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);
};


document.getElementById（“add”）.onclick=function（）{
var节点=document.createElement（“Li”）；
var text=document.getElementById（“idea”）.value；
var textnode=document.createTextNode（文本）；
node.appendChild（textnode）；
document.getElementById（“列表”）.appendChild（节点）；
}


document.getElementById（“add”）.onclick=function（）{
var节点=document.createElement（“Li”）；
var text=document.getElementById（“idea”）.value；
var textnode=document.createTextNode（文本）；
node.appendChild（textnode）；
document.getElementById（“列表”）.appendChild（节点）；
}

Show使用您尝试过的内容也有一些相关的线程：[javascript中有没有任何方法/方法可以动态地将子节点添加到列表元素？，[li元素在ul中使用jquery）非常有用，谢谢！您需要创建节点文本。使用createTextNode和创建元素也有一些相关的线程：[javascript中是否有任何方法/方式可以动态地将子节点添加到列表元素中？），[li元素在ul中使用jquery）非常有用，谢谢！您需要创建节点文本。使用createTextNode并创建一个元素，谢谢@tymeJV，看起来它会完全满足我的需要。请原谅这个极端的新手问题，但我如何确切地使用javascript？我是否将其封装在Yep中，您将需要做一些介绍JavaScript教程，这将解释如何实现这一点。好吧，我一直在看教程并尝试，但我似乎无法让它工作-你能看看上面的编辑，看看你是否能为我指出正确的方向吗？不要大写“C”在

onClick

中，它应该是

onClick

——另外，在HTML之后放上你的

脚本。这样你就有了内容…
它仍然不起作用，关于我可能做错了什么，还有其他想法吗？谢谢@tymeJV，看起来它会完全满足我的需要。请原谅这个极端的新手问题，但具体怎么做我使用javascript？我是否将其封装在其中？是的，你会想做一些介绍javascript的教程，这将解释如何实现这一点。好的，所以我一直在看教程并尝试，但我似乎无法让它工作-你能看看上面的编辑，看看你是否能为我指出正确的方向吗？不要大写“C"在onClick
中，它应该是onClick
——同时，将脚本
放在HTML之后。这样你就有了内容…
它仍然不起作用，关于我可能做错了什么，还有什么其他想法吗？不需要使用。在ID为的元素上查找。Jquery的实现方式是否与javascript相同？即在wo脚本标记？您需要在html的头部包含jQuery库，这是从CDN中最容易找到的，比如so
，