通过javascript添加一个清单项

所以，我试图打印出一个数组，获取用户输入文本添加到它，但我想打印出的是数组的有序列表。正如你所看到的，（如果你运行我的代码）列表项目只是不断添加用户输入，没有新的列表项添加人名。请帮忙！这是下面的代码：通过javascript添加一个清单项

<!DOCTYPE html> 
<html> 
<head> 
First name: <input type="text" id="firstname"><br> 

<script type="text/javascript"> 
var x= []; 

function changeText2(){ 
var firstname = document.getElementById('firstname').value; 
document.getElementById('boldStuff2').innerHTML = firstname; 
x.push(firstname); 
document.getElementById('demo').innerHTML = x; 
} 
</script> 

<p>Your first name is: <b id='boldStuff2'></b> </p> 
<p> Other people's names: </p> 

<ol> 
    <li id = "demo"> </li> 
</ol> 

<input type='button' onclick='changeText2()' value='Submit'/> 

</head> 
<body> 
</body> 
</html>

来源

2013-07-21 user2581598

''只包含元信息和链接到资源，而不是实际内容。但是，你没有得到一个新的清单项目的原因是你没有创建一个清单项目。 –

如果你想创建的每个输入/名称的li元素，那么你必须创建它，用document.createElement^[MDN]。

给列表中的ID：

<ol id="demo"></ol>

，并获得对它的引用：

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

在事件处理程序，创建一个与输入值作为内容的新的列表元素和追加到列表与Node.appendChild^[MDN]：

var firstname = document.getElementById('firstname').value; 
var entry = document.createElement('li'); 
entry.appendChild(document.createTextNode(firstname)); 
list.appendChild(entry);

DEMO

来源

2013-07-21 15:46:02

尝试这样：

var node=document.createElement("LI"); 
var textnode=document.createTextNode(firstname); 
node.appendChild(textnode); 
document.getElementById("demo").appendChild(node);

小提琴：http://jsfiddle.net/FlameTrap/3jDZd/

来源

2013-07-21 15:46:14

我最近提出了与此相同的挑战，无意中发现了这个线程，但使用追加发现了一个简单的解决方案...

var firstname = $('#firstname').val(); 

$('ol').append('<li>' + firstname + '</li>');

存储名字值，然后使用append将该值作为li添加到ol。我希望这有助于:)

来源

2016-10-06 19:02:48

我没有。那是问题吗？这实际上是我在SO上提交的第一个答复。这很新鲜。只是想帮助。感谢您的输入。 –

@JesseNovotny我很感谢你的回答。它确实帮了我。 – FewFlyBy

上面的答案对我很有帮助，但在我提交时添加名称时可能会有用（或最佳做法）。希望这会对某人有所帮助。 CodePen Sample

<form id="formAddName"> 
     <fieldset> 
     <legend>Add Name </legend> 
      <label for="firstName">First Name</label> 
      <input type="text" id="firstName" name="firstName" /> 

     <button>Add</button> 
     </fieldset> 
    </form> 

     <ol id="demo"></ol> 

<script> 
    var list = document.getElementById('demo'); 
    var entry = document.getElementById('formAddName'); 
    entry.onsubmit = function(evt) { 
    evt.preventDefault(); 
    var firstName = document.getElementById('firstName').value; 
    var entry = document.createElement('li'); 
    entry.appendChild(document.createTextNode(firstName)); 
    list.appendChild(entry); 
    } 
</script>

来源

2018-01-14 18:31:05 inkpixelspaper

通过javascript添加一个清单项

回答

相关问题