如何将单独的元素添加到 javaScript 中的列表中？

Question

我正在尝试为用户创建一个拥有记录列表的选项。但是我遇到了以下问题：

1. 当用户尝试创建一个没有名称的列表时，一个空的/不可见的元素会添加到列表中。我想要代码，如果用户将提示留空，则要求用户输入名称。
2. 添加元素时，我希望它们是独立的不同元素。现在它们被显示并显示为一个。

我希望你们中的一些人可以帮助我克服这个问题。请询问是否有任何不清楚的地方。

我现在的代码如下：

function myFunction1() {
  var txt;
  var person = prompt("Please enter the name of your record list:");
  if (person == null || person == "") {
    txt = "";
  } else {
    txt = person + "<br>";
  }
  document.getElementById("myRecords").innerHTML += txt;
}

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

Answer 1

使用prompt 时，最好使用while 循环来确保输入了输入。这将继续循环消息，直到用户输入足够的信息。当用户点击cancel 时，将返回一个空值。在 while 循环中，我们检查 person 是否为 null，如果是，我们立即返回。

要添加单独的元素，您可以使用 document.createElement，然后通过使用 appendChild 方法将该元素附加到您选择的父元素。

在下面的代码中，我冒昧地将您的 myRecords div 转换为 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>

Answer 2

您应该使用（无）有序列表（<ol>、<ul>）之类的东西，然后在需要时在 <a> 标记中附加包含名称的列表项（<li>）。如果您想在未输入名称时附加一个空项，则不必使用 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>

Answer 3

你需要把你的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，然后通过 appendChild 将其作为子元素附加到 myRecords 元素。

Answer 4

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 添加所需的元素。

Answer 5

在不知道你想要完成什么的情况下，这是我为你想出的解决方案：

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>，以便更好地在其中包含多个条目，并自动附加了<li></li> DOM，以便列表执行所有操作为你工作。

我还更改了函数以接受prompt_text 作为参数，因此如果它们不输入文本，您可以递归调用该函数。

编辑：更新了代码以了解用户单击取消按钮时返回的null，从而消除了由我最初发布的代码创建的错误。

最后的变化是我上面提到的递归函数调用。如果txt 变量为空，则该函数会使用新的prompt_text 调用自身，从而让您让用户知道为什么他们没有正确执行此操作，并给他们另一个机会来纠正它。