JavaScript：如何从数组中获取数据并创建HTML列表？

Question

因此，我有一些JavaScript代码，可以从任何subNav类中获取文本并将其放置在单个数组中。

 var subheading = [] var elements = document.getElementsByClassName('subNav'); for(var i=0; i<elements.length; i++) subheading.push(elements[i].textContent) var navList = subheading.join() 

但是，我坚持使用此文本并将其放入另一个div类（例如div sideNavBar）中的单独的组织列表中。

 <p class="subNav"> <a href"">Test 1</a> </p> <p class="subNav"> <a href"">Test 2</a> </p> <p class="subNav"> <a href"">Test 3</a> </p> <p class="subNav"> <a href"">Test 4</a> </p> <div class="sideNavBar"> </p> 

这样做的想法是能够将其放入固定的侧边栏中，然后该侧边栏可用于跳转到附加到子标题的锚，而不是仅在页面顶部具有链接。

谁能建议一个函数来创建列表，然后将数组中的数据放入其中？

Answer 1

Array.map()非常适合：

 var arrOfStrings = ["Val1", "Val2", "Val3"] var stringsAsNewMenu = arrOfStrings.map(val => `<li class="navItem">${val}</li>`).join("") var menuElem = document.createElement('ul') menuElem.innerHTML = stringsAsNewMenu document.body.appendChild(menuElem)