向父容器子元素追加内容遇问题，求正确DOM实现方法

原代码的核心问题 #

1. 语法与选择器错误：你的$.each写法不符合jQuery语法，且代码中选择了#result元素，但HTML里只有#box容器，选择器完全不匹配。
2. appendChild参数错误：appendChild要求传入Node类型对象，直接传字符串"coolText"会触发类型错误，必须先将字符串转为文本节点，或使用更简便的文本操作方法。
3. 循环逻辑错误：之前直接追加到子元素时所有内容重复出现，本质是循环中没有针对单个子元素操作，而是每次循环都给所有.item添加内容。

正确解决方案 #

假设你有15条需要分别对应每个.item的文本内容（示例用数组存储），以下是两种可行实现方式：

方案1：原生JavaScript实现

// 准备15条对应文本内容
const textList = Array.from({length:15}, (_, i) => `第${i+1}条内容`);
// 获取所有.item子元素
const items = document.querySelectorAll('#box .item');

// 循环匹配每个子元素与对应文本
items.forEach((item, index) => {
  // 方式1：直接设置文本（覆盖原有内容）
  item.textContent = textList[index];
  // 方式2：追加文本（不覆盖原有内容）
  // const textNode = document.createTextNode(textList[index]);
  // item.appendChild(textNode);
});

方案2：jQuery实现

// 准备15条对应文本内容
const textList = Array.from({length:15}, (_, i) => `第${i+1}条内容`);

// 遍历每个.item元素并添加对应文本
$('#box .item').each(function(index) {
  // 方式1：追加文本
  $(this).append(textList[index]);
  // 方式2：设置文本（覆盖原有内容）
  // $(this).text(textList[index]);
});

关键说明 #

• 确保循环时每个迭代对应单个子元素：通过forEach或each的索引值，将文本数组中对应下标的内容赋值给当前子元素，从根源避免内容重复。
• 规避appendChild参数错误：如果要用原生appendChild，必须先用document.createTextNode()把字符串转为文本节点；更高效的方式是直接使用textContent（原生）或text()/append()（jQuery）操作文本。

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