通過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添加一個清單項

回答

相關問題