如何将多个textarea内容转换为HTML段落并保存到单个输入框？

没问题，完全可以支持多个textarea的内容转换保存，核心问题是你之前的代码应该只获取了单个textarea元素，导致新增的无法被识别。下面是纯原生JS的修改方案，适配Bootstrap框架：

核心修改思路 #

1. 替换原来获取单个textarea的逻辑，改为获取页面上所有textarea元素
2. 遍历所有textarea，逐个处理内容并拼接成<p>标签
3. 将最终拼接好的HTML内容写入目标输入框

完整代码示例 #

1. 动态添加textarea的函数（适配Bootstrap样式） #

// 点击按钮新增带默认文本的textarea
function addTextarea() {
  const container = document.getElementById('textarea-container');
  const newTextarea = document.createElement('textarea');
  
  // 设置默认文本
  newTextarea.value = '默认文本';
  // 添加Bootstrap表单控件样式
  newTextarea.classList.add('form-control', 'mb-3');
  
  container.appendChild(newTextarea);
}

2. 保存所有textarea内容的函数 #

function saveAllContent() {
  // 获取页面上所有textarea元素
  const allTextareas = document.querySelectorAll('textarea');
  let resultHtml = '';
  
  // 遍历每个textarea处理内容
  allTextareas.forEach(textarea => {
    const content = textarea.value.trim();
    // 只处理非空内容，避免生成空的<p>标签
    if (content) {
      resultHtml += `<p>${content}</p>`;
    }
  });
  
  // 将结果写入目标输入框（替换成你的输入框ID）
  const outputInput = document.getElementById('output-input');
  if (outputInput) {
    outputInput.value = resultHtml;
  }
}

3. 对应的HTML结构（配合Bootstrap） #

<div class="container mt-4">
  <button onclick="addTextarea()" class="btn btn-primary mb-3">新增文本框</button>
  <div id="textarea-container"></div>
  <div class="mt-3">
    <label class="form-label">转换结果：</label>
    <input type="text" id="output-input" class="form-control" readonly>
  </div>
  <button onclick="saveAllContent()" class="btn btn-success mt-3">保存内容</button>
</div>

关键细节说明 #

• document.querySelectorAll('textarea')会获取页面上所有textarea元素，不管是初始存在的还是动态新增的
• 用trim()去除内容首尾空白，避免用户仅输入空格时生成无效的<p>标签
• 每次点击保存按钮时重新获取所有textarea，无需为动态新增元素额外绑定事件，逻辑更简洁
• 直接使用Bootstrap内置类控制样式，保持界面风格统一

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