如何基于输入数据动态生成列表？含姓名列表生成示例

一、基于输入动态生成列表 #

以JavaScript实现前端动态列表为例，核心是监听输入变化并实时渲染列表：

1. HTML结构：

<input type="text" id="inputField" placeholder="输入内容（空格分隔项）...">
<ul id="dynamicList"></ul>

2. JavaScript逻辑：

const inputField = document.getElementById('inputField');
const dynamicList = document.getElementById('dynamicList');

inputField.addEventListener('input', function() {
  dynamicList.innerHTML = '';
  const inputValue = this.value.trim();
  if (!inputValue) return;
  
  // 按空格分割输入内容生成列表项，可根据需求调整分割规则
  const items = inputValue.split(' ').filter(item => item);
  items.forEach(item => {
    const li = document.createElement('li');
    li.textContent = item;
    dynamicList.appendChild(li);
  });
});

说明：输入框内容变化时，会自动清空旧列表，将输入内容分割后生成新的列表项，输入为空时列表同步清空。

二、利用绿色标记输入数据生成姓名列表 #

结合示例图片的多行输入场景（绿色标记区域为每行一个姓名的输入框），实现步骤如下：

1. HTML结构：

<textarea id="nameInput" placeholder="每行输入一个姓名..." rows="5"></textarea>
<button id="generateBtn">生成姓名列表</button>
<ul id="nameList"></ul>

2. JavaScript逻辑：

const nameInput = document.getElementById('nameInput');
const generateBtn = document.getElementById('generateBtn');
const nameList = document.getElementById('nameList');

generateBtn.addEventListener('click', function() {
  nameList.innerHTML = '';
  const inputText = nameInput.value.trim();
  if (!inputText) return;
  
  // 按换行分割输入内容，过滤空行后生成姓名列表
  const names = inputText.split('\n').filter(name => name.trim());
  names.forEach(name => {
    const li = document.createElement('li');
    li.textContent = name.trim();
    nameList.appendChild(li);
  });
});

说明：点击按钮后，读取多行输入框的内容，按换行分割并去除空行，将每个姓名转换为列表项渲染到页面中。

内容的提问来源于stack exchange，提问作者user11586200