Как сделать элемент h1 для каждого значения в массиве?

Question

У меня есть массив в JavaScript, как показано в примере ниже. Мой вопрос: как я могу иметь элемент h1 для каждого значения массива при нажатии кнопки?

Names = []

function submit() {
  let inputValue = document.getElementById("name").value;
  Names.push(inputValue);
  let frame = document.getElementById("frame");
  frame.innerHTML = `<div><h1>${Names}</h1></div>`
  
}

<button onclick="submit()">Submit</button>
<input placeholder="name" id="name">
<div id="frame"></div>

Как создать отдельные элементы H1, содержащие каждое значение из массива?

Answer 1

Вы можете сделать это, как показано ниже, очищая frame innerHTML каждый раз, когда вы добавляете новый sh, а затем перебирая список Names и создавая новые элементы h1, используя document.createElement("h1"). Ключевым моментом здесь является использование append() для добавления созданного элемента к нужному элементу.

Проверьте ниже:

var Names = []

function submit() {
  let inputValue = document.getElementById("name").value;
  Names.push(inputValue);
  let frame = document.getElementById("frame");
  
  frame.innerHTML = "";
  
  Names.forEach(function(el, i) {
    let h1 = document.createElement("h1");
    h1.innerHTML = Names[i];
    frame.append(h1);
  });
}

<button onclick="submit()">Submit</button>
<input placeholder="name" id="name">
<div id="frame"></div>

Другим, и, возможно, лучшим подходом будет просто использовать append() для добавления нового ввода, например:

var Names = []

function submit() {
  let inputValue = document.getElementById("name").value;
  Names.push(inputValue);
  let frame = document.getElementById("frame");
  let h1 = document.createElement("h1");
  h1.innerHTML = inputValue;
  frame.append(h1);
}

<button onclick="submit()">Submit</button>
<input placeholder="name" id="name">
<div id="frame"></div>

Answer 2

Я думаю, что вы имеете в виду всякий раз, когда пользователь вводит имя и нажимает "отправить". Имя должно быть добавлено в список с рамкой идентификатора, верно?

Если да, то вам просто нужно решить небольшую проблему:

 frame.innerHTML = `<div><h1>${Names}</h1></div>`

эта строка кода вызывает эту проблему, вы переписываете новое имя поверх старого, и вы должны сделать что-то вроде:

frame = old frame + new имя

в коде:

 frame.innerHTML += `<div><h1>${Names}</h1></div>`

или

 frame.innerHTML = frame.innerHTML+ `<div><h1>${Names}</h1></div>`

обе строки кода выполняют одно и то же, но пишутся по-разному