如何在javaScript中向列表添加单独的元素？

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

当用户试图创建一个没有名称的列表时，一个空的/不可见的元素被添加到列表中。我想要的代码，要求用户输入一个名称，如果他离开提示空白

当添加元素时，我希望它们是独立的、不同的元素。现在，它们显示为一个 我希望你们中的一些人能帮助我克服这个问题。如果有什么不清楚的地方，请询问

我目前的代码如下：

函数myFunction1（）{
var-txt；
var person=prompt（“请输入记录列表的名称：”）；
如果（person==null | | person==“”）{
txt=“”；
}否则{
txt=人+“
”；
}
document.getElementById（“myRecords”）.innerHTML+=txt；
}

创建记录列表

您需要将JS更改为以下内容：

函数myFunction1（）{
var-txt；
var person=prompt（“请输入记录列表的名称：”）；
如果（person==“”）{
警报（“请输入名称”）；
返回；
}else if（person==null）{
返回；
}否则{
txt=人；
}
var span=document.createElement（'span'）；
setAttribute（'class'，'myElement'）；
span.innerHTML=txt；
document.getElementById（“myRecords”）.appendChild（span）；
}

创建记录列表

如果需要，您应该使用类似于（未）排序列表（

，

）的东西，然后在标签中添加包含名称的列表项（

）。如果要在未输入名称时追加空项，则不必使用If语句

const getRecordList=（）=>document.getElementById（'recordList'）；
const getCreateButton=（）=>document.getElementById（'create'）；
函数PrompInput（值=“”）{
const message='请输入记录列表的名称：'；
让name=''；
while（name==''）{
名称=提示（消息、值）；
}
返回名称；
}
函数createListItem（名称）{
const listItem=document.createElement（'li'）；
listItem.innerHTML=`${name}`；
返回列表项；
}
函数createRecord（）{
const name=prompInput（）；
如果（！name）返回；
getRecordList（）.appendChild（createListItem（名称| |“”））；
}
函数更新记录（li）{
li.innerHTML=prompInput（li.innerHTML）；
}

记录列表

创建

在不确切了解您想要实现的目标的情况下，我为您提供了以下解决方案：

函数myFunction（提示文字）{
var-txt；
var列表；
风险人；
if（提示文字！=''&&prompt文字！=未定义）{
person=提示（提示文字）；
}否则{
person=提示（“请输入您的记录列表名称：”）；
}
如果（person==null | | person==“”）{
txt=“”；
}否则{
txt='
'+person+“
”；
}
如果（txt！=''）{
document.getElementById（“myRecords”）.innerHTML+=txt；
}else if（person！=null）{
myFunction（“名称不能为空，请输入记录列表的名称：”；
}否则{
返回；
}
}

创建记录列表

函数myFunction1（）{
让person=prompt（“请输入记录列表的名称：”）；
如果（人）{
设div=document.createElement（'div'）；
div.innerText=个人；
文件.getElementById（“myRecords”）.appendChild（div）；
}否则{
警报（“请输入名称”）；
}
}

创建记录列表

使用

提示符

时，最好使用

while

循环以确保输入。这将继续循环消息，直到用户输入足够的信息。当用户点击

cancel

时，返回一个空值。在

while

循环中，我们检查person是否为null，如果为null，我们立即返回

要添加单独的元素，可以使用

document.createElement

，然后通过使用

appendChild

方法将该元素附加到选定的父元素

在下面的代码中，我冒昧地将myRecords div转换为

ul

或无序列表标签。输入名称后，它们将作为

li

（列表项）子项添加到此标记中

函数myFunction1（）{
var person，ul=document.getElementById（“myRecords”），li=document.createElement（“li”）；
而（！人）{
person=提示（“请输入您的记录列表名称：”）；
如果（person==null）返回；
}
li.textContent=人；
ul.儿童（li）；
}
myFunction1（）；
myFunction1（）
谢谢你的提示-这对我很有用。如果可能，我建议将id=“myRecords”的元素作为一个元素。如果我将元素改回a，这个解决方案似乎不起作用。@tobiasmadsen17好吧，如果将
ul
更改为
a
，它将不适用于
li
子元素，因为唯一可以有
li
子元素的元素是
ul/ol
。然后执行
li=document.createElement（“div”）
，它就可以工作了（您可能需要将li变量名称更改为div）。谢谢！这个解决方案也起了作用。问题是关于创建一个元素，并将其附加到子元素。谢谢你的提示：-）谢谢你的提示！如果可能的话，我希望将元素保留为一个。这种解决方案似乎不可能做到这一点。我缺少什么吗？当然，我创建了一个新函数，用一个
标记包装名称来创建列表项。