使用Javascript添加并显示所有项目的列表

问题描述：

我想在Javascript中创建一个包含提交按钮的列表。一旦输入一个项目，我希望它显示在以前输入的项目下。到目前为止，我放入的物品替代了之前的物品。任何方向极大赞赏使用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>

这里的'innerHTML'是用于你的问题的强大武器！这将清除以前的代码并仅显示当前值。

我相信OP希望列表能够在每次印刷中继续增长。这只会创建第一个条目。 –

哦..好极了！ appendChild（）必须是最好的解决方案！ –

答

这里是您正在寻找的东西 - >

OPEN for DEMO

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

和JS：

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

答

使用.appendChild()应该解决您的问题。此外，感谢submit事件，您可以单击提交按钮或按ENTER键。

ul = document.getElementById("ul"); 
 
form = document.getElementById("form"); 
 
div = document.createElement("div"); 
 
form.elements.text.focus(); 
 

 
form.addEventListener("submit", function (ev) { 
 
    var textEl = this.elements.text; 
 
    ul.appendChild(makeLI(textEl.value)); 
 
    textEl.value = ""; 
 
    ev.preventDefault(); 
 
}); 
 

 
function makeLI (content) { 
 
    div.innerHTML = "<ul><li>" + content + "</li></ul>"; 
 
    return div.firstChild.firstChild; 
 
}

<form action="" id="form"> 
 
    <p> 
 
    <input type="text" name="text" /> 
 
    <input type="submit" /> 
 
    </p> 
 
</form> 
 
<ul id="ul"></ul>

使用Javascript添加并显示所有项目的列表

相关推荐