How to display elements data stored in a javascript array as list elements in the DOM-CodePudding

I am a newbie at web development. I am trying to display data that is being stored in javascript array, inside an unordered list as list elements. I have tried looping through the elements in the array and display them one at a time using for loops but its not working

let linksArray = [] // array to store link leads while browsing
let inputEl = document.getElementById("input-el") // to get a hold on the input element from the dom
let displayEl = document.getElementById("display_link-el")

//function to save links inputs into linksArray
function save(params) {
  linksArray.push(inputEl.value)
  console.log(linksArray);
  localStorage.setItem("mylinks", JSON.stringify(linksArray))
  inputEl.value = ""
  displayEl.textContent = linksArray
}

//function to conver linksArray to a list element in the DOM
function convetToListli(linksArray) {
  for (let i = 0; i < linksArray.length; i  ) {
    let links = "<li>"
    linksArray[i]
    " </li>"

  }

}

<input id="input-el" title="lead" placeholder="input weblink" type="text">
<button id="input-btn" onclick="save()">SAVE </button>
<button id="del-btn" ondblclick="delLeads()">DELETE</button>
<div>
  <div>
    <ul id="display_link-el"></ul>
  </div>
  <div>
    <ul id="log_link-el"></ul>
  </div>
</div>

CodePudding user response：

I have added small correction to your script

function save(params) {
  linksArray.push(inputEl.value)
  console.log(linksArray);
  inputEl.value=""
  displayEl.innerHTML = convetToListli(linksArray)
}

//function to conver linksArray to a list element in the DOM
function convetToListli(linksArray) {
var links = ""
  for (let i = 0; i < linksArray.length; i  ) {
    links= links   "<li>" linksArray[i] " </li>"  
  }
  return links
  
}

This is just for example purchase

NOTE: Make sure to filter the input field while using innerHTML because it will leads to XSS

CodePudding user response：

You should learn basic DOM manipulations. Here's one possible solution for your question

const list = document.querySelector('.list');

const links = ['link 1', 'link 2', 'link 3'];

links.forEach(link => {
  let item = document.createElement('li');
  item.textContent = link;
  list.appendChild(item)
})

<ul ></ul>