通过 JavaScript 将 textarea 中按空格分割的每个单词，分别包裹在独立的 中，并在其内创建对应 显示该单词。点击按钮即可实时渲染，支持多次触发并自动清理旧元素。

通过 javascript 将 textarea 中按空格分割的每个单词，分别包裹在独立的 `

` 中，并在其内创建对应 `
• ` 显示该单词。点击按钮即可实时渲染，支持多次触发并自动清理旧元素。

  在网页开发中，常需将用户输入的文本按语义单元（如单词）进行结构化展示。本教程演示如何从 <textarea></textarea> 提取单词、逐个生成带有唯一类名（如 word1、word2…）的 <ul></ul> 元素，并在每个 <ul></ul> 内嵌套一个 <li> 展示对应单词。

  核心逻辑分为三步：

  1. 获取并清洗输入：使用 document.getElementById('myArea').value 读取文本内容；
  2. 分词处理：调用 .split(' ') 按空格切分字符串，得到单词数组（注意：未做多余空格过滤，如需健壮性可追加 .filter(word => word.trim())）；
  3. 动态构建 DOM：遍历单词数组，为每个单词创建 <ul></ul>（设置 className = 'word' + (i + 1)）和 <li>，再将 <li> 追加至 <ul></ul>，最后将 <ul></ul> 插入 document.body。

  为避免重复点击按钮导致 DOM 堆积，代码中预先清除了页面所有 <ul></ul> 元素：

  function show() {
    // 清理已有 ul（防止重复渲染）
    const uls = document.querySelectorAll('ul');
    uls.forEach(ul => ul.remove());
  
    const text = document.getElementById('myArea').value;
    const words = text.split(' ').filter(word => word.trim() !== ''); // 增强容错：跳过空字符串
  
    words.forEach((word, index) => {
      const ul = document.createElement('ul');
      ul.className = `word${index + 1}`;
  
      const li = document.createElement('li');
      li.textContent = word;
  
      ul.appendChild(li);
      document.body.appendChild(ul);
    });
  }

  ⚠️ 注意事项：

  • 类名 word1、word2 等为纯字符串拼接，不涉及 ID 或事件绑定；如需后续操作（如点击高亮），建议改用 data-word-index 等语义化属性；
  • 当前实现未处理标点符号（如 "hello!" 会被整体视为一个词），如需更精准分词，可结合正则 text.match(/\b\w+\b/g)；
  • 不推荐在生产环境直接操作 document.body.appendChild() —— 更佳实践是将输出区域封装为 <div id="output-container"></div>，统一挂载其下，提升可维护性与样式隔离性。

  此方法轻量、兼容性强（支持所有现代浏览器及 IE9+），是前端基础 DOM 动态生成的典型范例。