本文详解如何通过 JavaScript 将 textarea 中以空格分隔的单词，逐个封装为独立的 元素，每个 ul 内仅含一个 显示对应单词，并支持多次点击按钮刷新渲染。

本文详解如何通过 javascript 将 textarea 中以空格分隔的单词，逐个封装为独立的 `

` 元素，每个 ul 内仅含一个 `
• ` 显示对应单词，并支持多次点击按钮刷新渲染。

  在前端开发中，常需将用户输入的文本按语义单元（如单词）拆解并结构化渲染。本教程实现一个轻量级功能：点击按钮后，自动读取 <textarea></textarea> 的内容，按空格分割为单词数组，为每个单词创建一个独立的 <ul></ul> 标签，并赋予唯一类名（如 word1、word2…），再在其内部插入 <li> 展示该单词。

  以下是完整、可直接运行的 HTML 示例：

  
  
      <meta charset="UTF-8"><title>单词结构化生成器</title><textarea id="myArea" class="rebaz" rows="4" cols="50">hello my name is rebaz</textarea><button onclick="show();">Show content</button>
  
      <script>
          function show() {
              // 1. 清除页面中已存在的所有 ul 元素（避免重复叠加）
              const existingUls = document.querySelectorAll('ul');
              existingUls.forEach(ul => ul.remove());
  
              // 2. 获取 textarea 值并按空格分割为单词数组
              const text = document.getElementById('myArea').value.trim();
              const words = text ? text.split(/\s+/) : [];
  
              // 3. 遍历每个单词，动态创建 ul + li
              words.forEach((word, index) => {
                  const ul = document.createElement('ul');
                  ul.className = `word${index + 1}`; // 类名唯一：word1, word2...
  
                  const li = document.createElement('li');
                  li.textContent = word;
  
                  ul.appendChild(li);
                  document.body.appendChild(ul);
              });
          }
      </script>

  ✅ 关键要点说明：

  • 使用 split(/\s+/) 替代简单 split(' ')，可正确处理多个连续空格、制表符或换行符，提升鲁棒性；
  • trim() 防止首尾空白导致空字符串项；
  • querySelectorAll('ul').forEach(...remove()) 比原生 getElementsByTagName + 循环移除更简洁安全；
  • 类名采用 word${index + 1} 实现语义化且唯一，便于后续 CSS 样式控制或 JS 选择（如 document.querySelector('.word3')）；
  • 所有 DOM 操作均在 show() 函数内完成，确保逻辑内聚，无需外部依赖。

  ? 扩展建议：
  若需支持中文分词、标点过滤或添加交互（如点击 li 高亮/复制），可在 li 上绑定事件监听器；如需样式隔离，可为每个 ul 添加 style="display: inline-block; margin-right: 8px;" 实现横向排列。

  该方案简洁、兼容性强（支持所有现代浏览器），是文本结构化渲染的基础实践范例。