在这个结构中：

立即学习“Java免费学习笔记（深入）”；

零一万物开放平台

零一万物大模型开放平台

下载

• ul 元素具有 id="box"，它包含了一系列 li 列表项。
• textarea 元素具有 id="id-of-your-textarea"，这是我们将要追加文本的目标。

JavaScript实现步骤

要实现列表项内容的动态追加，我们需要遵循以下步骤：

1. 获取DOM元素： 使用 document.getElementById() 获取文本区域和列表容器。
2. 遍历列表项： 获取列表容器中的所有子元素（即 li 标签）。
3. 添加事件监听器： 为每个列表项添加一个点击事件监听器。
4. 更新文本区域： 在事件处理函数中，获取被点击列表项的文本内容，并将其追加到文本区域的 value 属性中。

下面是实现上述逻辑的JavaScript代码：

// 获取所需的HTML元素
const textArea = document.getElementById('id-of-your-textarea'); 
const boxLi = document.getElementById('box').children; // 获取所有列表项的HTMLCollection

// 遍历所有列表项，为每个项添加点击事件监听器
for (let i = 0; i < boxLi.length; i++) {
  boxLi[i].addEventListener('click', () => {
    // 当列表项被点击时，将其文本内容追加到文本区域
    // `textContent` 用于获取元素的纯文本内容
    // `\n` 用于在每次追加后添加一个换行符，使内容更易读
    textArea.value += boxLi[i].textContent + '\n';
  });
}

完整示例代码

将HTML结构和JavaScript代码结合起来，您可以创建一个完整可运行的示例：

  
  
  
  



  
点击列表项，内容追加到文本框

  

    
苹果
    
香蕉
    
橙子
    
葡萄
  

  

  

代码解析

• const textArea = document.getElementById('id-of-your-textarea');
  • 通过 document.getElementById() 方法，我们获取了ID为 id-of-your-textarea 的 元素，并将其存储在 textArea 常量中。
• const boxLi = document.getElementById('box').children;
  • 首先获取ID为 box 的
    元素。
  • .children 属性返回一个 HTMLCollection，其中包含指定元素的所有子元素（这里就是所有的
  • 元素）。
• for (let i = 0; i
  • 这是一个标准的 for 循环，用于遍历 boxLi 这个 HTMLCollection 中的每一个列表项。
• boxLi[i].addEventListener('click', () => { ... });
  • addEventListener() 方法用于为指定的元素添加事件监听器。
  • 'click' 是事件类型，表示当元素被点击时触发。
  • () => { ... } 是一个箭头函数，作为事件被触发时执行的回调函数。
• textArea.value += boxLi[i].textContent + '\n';
  • boxLi[i].textContent 获取当前被点击的
  • 元素的纯文本内容。例如，如果
  • 是
  • 苹果
  ，则 textContent 将是 "苹果"。
• textArea.value 用于访问或设置 元素的内容。
• += 是复合赋值运算符，它将右侧的值追加到左侧现有值的后面。
• + '\n' 在每次追加的文本后面添加一个换行符，确保每次点击的列表项内容都在新的一行显示，提高了文本区域的可读性。