Javascript中添加和显示所有项目的列表_Javascript

Javascript中添加和显示所有项目的列表

javascript

Javascript中添加和显示所有项目的列表,javascript,Javascript,我正在尝试用Javascript制作一个有提交按钮的列表。一旦输入一个项目，我希望它显示在以前输入的项目下。到目前为止，我放进去的东西取代了前面的。任何方向都很受欢迎它就这么简单。考虑下面的例子： <html> <input id="name"></input> <label id="nameDisplay"></label> <input id="place"></input> <label id="pl

我正在尝试用Javascript制作一个有提交按钮的列表。一旦输入一个项目，我希望它显示在以前输入的项目下。到目前为止，我放进去的东西取代了前面的。任何方向都很受欢迎

它就这么简单。考虑下面的例子：

<html>
<input id="name"></input>
<label id="nameDisplay"></label>
<input id="place"></input>
<label id="placeDisplay"></label>
<button onclick="display()">Click</button>
</html>

<script>
function display(){
    name = document.getElementById('name').value;
    place= document.getElementById('place').value;
    document.getElementById('nameDisplay').innerHTML = name;
    document.getElementById('placeDisplay').innerHTML = place;
}
</script>


点击
函数显示（）{
name=document.getElementById（'name'）。值；
place=document.getElementById（'place'）.value；
document.getElementById（'nameDisplay'）。innerHTML=name；
document.getElementById（'placeDisplay'）。innerHTML=place；
}

这里的“innerHTML”是解决您的问题的有力武器！这将删除以前的代码并仅显示当前值。

这是您要查找的内容->

HTML代码：

First name:
<input type="text" id="firstname">
<br>
<p>Your first name is: <b id='boldStuff2'></b> 
</p>
<p>Other people's names:</p>
<ol id="demo"></ol>
<input type='button' onclick='changeText2()' value='Submit' />

使用

.appendChild（）

可以解决您的问题。此外，由于有了

submit

事件，您可以单击submit按钮或按ENTER键

ul=document.getElementById（“ul”）；
表单=document.getElementById（“表单”）；
div=document.createElement（“div”）；
form.elements.text.focus（）；
表格.附录列表（“提交”，功能（ev）{
var textEl=this.elements.text；
ul.appendChild（makeLI（textEl.value））；
textEl.value=“”；
ev.preventDefault（）；
});
函数makeLI（内容）{
div.innerHTML=“”+内容+””；
返回div.firstChild.firstChild；
}

您能为您尝试过的内容显示一些代码吗？我相信OP希望列表随着每一次印刷继续增长。这只会创建第一个条目。哦。。伟大的appendChild（）必须是最佳解决方案！

var list = document.getElementById('demo');

function changeText2() {
    var firstname = document.getElementById('firstname').value;
    document.getElementById('boldStuff2').innerHTML = firstname;
    var entry = document.createElement('li');
    entry.appendChild(document.createTextNode(firstname));
    list.appendChild(entry);
}