如何用JavaScript根据用户输入数量创建含指定字符串的div？

下面是完整的实现方案，包含HTML结构、基础样式和核心逻辑：

HTML结构 #

先搭建输入区域和结果容器：

<div class="input-section">
  <label for="count-input">生成数量：</label>
  <input type="number" id="count-input" min="1" placeholder="请输入数字">
  
  <label for="text-input">显示文本：</label>
  <input type="text" id="text-input" placeholder="请输入要显示的字符串">
  
  <button id="submit-btn">生成Div</button>
</div>

<div id="result-container"></div>

基础样式（可选） #

给元素加些简单样式提升体验：

.input-section {
  margin: 20px 0;
  display: flex;
  gap: 10px;
  align-items: center;
}

input {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

button {
  padding: 8px 16px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background: #0056b3;
}

#result-container {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#result-container div {
  padding: 12px 20px;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 4px;
}

JavaScript核心逻辑 #

处理提交事件，生成对应数量的Div：

// 获取DOM元素
const countInput = document.getElementById('count-input');
const textInput = document.getElementById('text-input');
const submitBtn = document.getElementById('submit-btn');
const resultContainer = document.getElementById('result-container');

// 绑定点击事件
submitBtn.addEventListener('click', () => {
  // 获取输入值并转换
  const count = parseInt(countInput.value);
  const text = textInput.value.trim();
  
  // 输入验证
  if (isNaN(count) || count < 1) {
    alert('请输入有效的正整数');
    return;
  }
  if (!text) {
    alert('请输入要显示的字符串');
    return;
  }
  
  // 清空之前的结果（可选，若需要保留之前的可删除此行）
  resultContainer.innerHTML = '';
  
  // 循环创建Div
  for (let i = 0; i < count; i++) {
    const newDiv = document.createElement('div');
    newDiv.textContent = text;
    resultContainer.appendChild(newDiv);
  }
  
  // 清空输入框（可选）
  countInput.value = '';
  textInput.value = '';
});

关键点说明 #

• 输入验证：确保数字是有效的正整数，同时字符串不为空，避免无效操作
• DOM操作：使用createElement创建新Div，textContent设置文本，appendChild添加到容器中
• 可选优化：代码中包含了清空之前结果、清空输入框的逻辑，可根据需求调整

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