英文:
Adding items to a html list from javascript
问题
我正在尝试将JavaScript数组中的项目添加到我的HTML列表中。我已经成功使数组显示出来，但是整个数组显示在列表中的一个项目中，而不是每个项目都有自己的项目符号。
例如：
•Sugar,Milk,Bread,Apples
而不是：
•Sugar
•Milk
•Bread
•Apples
let myArray = ["Sugar", "Milk", "Bread", "Apples"]
arrayList = (arr) => {
let list1 = document.querySelector("#itemList");
arr.forEach(item => {
let myListItems = document.createElement("li");
myListItems.textContent = item;
list1.appendChild(myListItems);
});
}
arrayList(myArray)
英文:
I am trying to add items from my array in javascript into my html list. I have gotten it where the array displays but my entire array displays in one bullet point on my list instead of each item on their own bullet points.
eg
•Sugar,Milk,Bread,Apples
instead of
•Sugar
•Milk
•Bread
•Apples
<!-- language: lang-js -->
let myArray = ["Sugar", "Milk", "Bread", "Apples"]
arrayList = (arr) => {
let list1 = document.querySelector("#itemList");
let myListItems = document.createElement("li");
myListItems.textContent = arr;
list1.appendChild(myListItems)
}
arrayList(myArray)
答案1
得分: 2
问题出在你获取了所有数组元素的文本，并将它们放入单个li中。
要解决这个问题，你需要遍历数组，为其中的每个项创建一个新的li：
let myArray = ["Sugar", "Milk", "Bread", "Apples"];
let list1 = document.querySelector("#itemList");
arrayList = (arr) => {
let items = arr.forEach(item => {
let li = document.createElement('li');
li.textContent = item;
list1.appendChild(li)
});
}
arrayList(myArray)
<ul id="itemList"></ul>
英文:
The issue is because you're getting the text of all the array elements and putting them in to a single li.
To fix the problem you need to loop through the array, creating a new li for each item within it:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
let myArray = ["Sugar", "Milk", "Bread", "Apples"];
let list1 = document.querySelector("#itemList");
arrayList = (arr) => {
let items = arr.forEach(item => {
let li = document.createElement('li');
li.textContent = item;
list1.appendChild(li)
});
}
arrayList(myArray)
<!-- language: lang-html -->
<ul id="itemList"></ul>
<!-- end snippet -->
答案2
得分: 1
你需要循环遍历数组：
<html>
<body>
<ul id="itemList">
</ul>
<script>
const myArray = ["Sugar", "Milk", "Bread", "Apples"]
createLiAndAppend = (arr, listId) => {
const list1 = document.getElementById(listId);
const myListItems = document.createElement("li");
myListItems.textContent = arr;
list1.appendChild(myListItems);
}
myArray.forEach(m => createLiAndAppend(m, "itemList"));
</script>
</body>
</html>
如果需要进一步的帮助，请告诉我。
英文:
You need to loop through the array:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<html>
<body>
<ul id="itemList">
</ul>
</body>
<script>
const myArray = ["Sugar", "Milk", "Bread", "Apples"]
createLiAndAppend = (arr, listId) => {
const list1 = document.getElementById(listId);
const myListItems = document.createElement("li");
myListItems.textContent = arr;
list1.appendChild(myListItems);
}
myArray.forEach(m => createLiAndAppend(m, "itemList"));
</script>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论