Как добавить отдельные элементы в список в javaScript?

вам нужно изменить свой JS на следующее:

function myFunction1() {
  var txt;
  var person = prompt("Please enter the name of your record list:");
  if (person == "") {
      alert('Please enter a name');
      return;
  } else if (person == null){
      return;
  } else {
      txt =  person;
  }
  var span = document.createElement('span');
  span.setAttribute('class', 'myElement');
  span.innerHTML = txt;
  
  document.getElementById("myRecords").appendChild(span);
}

<a id = "myRecords"></a>
<a id = "create" onclick = "myFunction1()">Create RecordList</a>

С помощью createElement создается новый элемент, чтобы добавить класс, вы можете использовать setAttribute, а затем добавить его в качестве дочернего элемента к своему элементу myRecords через appendChild.

Вы должны использовать что-то вроде (не) упорядоченного списка (<ol>, <ul>), а затем при необходимости добавить элемент списка (<li>), содержащий имя, в теге <a>. Если вы хотите добавить пустой элемент, когда имя не введено, вам не нужно использовать оператор if.

const getRecordList = () => document.getElementById('recordList');
const getCreateButton = () => document.getElementById('create');

function promptInput(value = '') {
  const message = 'Please enter the name of your record list:';
  let name = '';
  while (name === '') {
    name = prompt(message, value);
  }
  return name;
}

function createListItem(name) {
  const listItem = document.createElement('li');
  listItem.innerHTML = `<a onclick = "updateRecord(this)">${name}</a>`;
  return listItem;
}

function createRecord() {
  const name = promptInput();
  if (!name) return;
  getRecordList().appendChild(createListItem(name || ''));
}

function updateRecord(li) {
  li.innerHTML = promptInput(li.innerHTML);
}

<h2>Record List</h2>
<ol id = "recordList"></ol><hr>
<button id = "create" onclick = "createRecord()">Create</button>

Не зная точно, чего вы пытаетесь достичь, вот решение, которое я для вас придумал:

function myFunction(prompt_text) {
  var txt;
  var list;
  var person;
  if (prompt_text != '' && prompt_text != undefined) {
    person = prompt(prompt_text);
  } else {
    person = prompt("Please enter the name of your record list:");
  }
  if (person == null || person == "") {
    txt = "";
  } else {
    txt = '<li>' + person + "</li>";
  }
  if (txt != '') {
    document.getElementById("myRecords").innerHTML += txt;
  } else if (person != null){
    myFunction("Names cannot be blank, please enter the name of your record list:");
  } else {
    return;
  }
}

<ul id = "myRecords"></ul>
<a id = "create" onclick = "myFunction()">Create RecordList</a>

Я изменил контейнер, в который вы помещаете данные, в неупорядоченный список <ul></ul>, чтобы облегчить создание в нем нескольких записей, и автоматически добавил DOM <li></li>, чтобы список выполнял всю работу за вас.

Я также изменил функцию, чтобы принимать prompt_text в качестве параметра, поэтому вы можете рекурсивно вызывать функцию, если они не вводят текст.

Обновлено: обновил код, чтобы понять, что null возвращается, когда пользователь нажимает кнопку отмены, что устраняет ошибку, созданную исходным кодом, который я опубликовал.

Последнее изменение - это упомянутый выше рекурсивный вызов функции. Если переменная txt пуста, функция вызывает себя с новым prompt_text, что позволяет вам сообщить пользователю, ПОЧЕМУ он сделал это неправильно, а также дает ему еще одну возможность исправить это.

function myFunction1() {
  let person = prompt("Please enter the name of your record list:");
  if (person) {
    let div = document.createElement('div');
    div.innerText=person;
    document.getElementById("myRecords").appendChild(div);
  }else{
    alert('Please enter a name');
  }
}

<a id = "myRecords"></a>
<a id = "create" onclick = "myFunction1()">Create RecordList</a>

Вы можете createElement и appendChild добавить нужные элементы.

При использовании prompt лучше всего использовать петлю while, чтобы убедиться, что ввод введен. Это будет продолжать цикл сообщения, пока пользователь не введет достаточную информацию. Когда пользователь нажимает cancel, возвращается нулевое значение. В цикле while мы проверяем, является ли person нулевым, и если это так, мы немедленно возвращаемся.

Чтобы добавить отдельные элементы, вы можете использовать document.createElement, а затем добавить этот элемент к выбранному родительскому элементу с помощью метода appendChild.

В приведенном ниже коде я взял на себя смелость преобразовать ваш div myRecords в ul или тег неупорядоченного списка. При вводе имен они добавляются как дочерние элементы li (элемент списка) к этому тегу.

function myFunction1() {
  var person, ul = document.getElementById("myRecords"), li = document.createElement("li");
  while (!person) {
    person = prompt("Please enter the name of your record list:");
    if (person == null) return;
  }
  li.textContent = person;
  ul.appendChild(li);
}
myFunction1();
myFunction1();

<ul id = "myRecords"></ul>

Если вы не хотите использовать список, вы можете просто обновить разметку и изменить то, что вы добавляете. Ниже myRecords - это тег a. Мы добавляем div с соответствующим текстом к этому тегу привязки, как делали выше.

function myFunction1() {
  var person, a = document.getElementById("myRecords"), div = document.createElement("div");
  while (!person) {
    person = prompt("Please enter the name of your record list:");
    if (person == null) return;
  }
  div.textContent = person;
  a.appendChild(div);
}
myFunction1();

<a id = "myRecords" href = "#"></a>