如何动态创建可向JavaScript函数传递列表的HTML链接并实现递归生成？

看起来你在动态生成嵌套链接时遇到了数据传递的坑——直接把myList拼接到onclick的字符串里，要么会出现语法错误，要么传递过去的根本不是原来的列表数据对吧？我来帮你拆解问题，再给几个实用的解决方案：

先说说原代码的问题 #

你原来的代码里，拼接onclick属性时直接写了${myList}，比如如果myList是数组["apple", "banana"]，最终生成的HTML会是：

<a href='#' onclick='displayChildren("xxx/apple", apple,banana);'>apple</a>

这显然不是有效的JS语法；如果是对象的话，会直接变成[object Object]，完全没法用。所以核心问题是不能直接把复杂数据类型（数组/对象）拼接到字符串里，得先把它转成能安全传递的格式。

方案1：用JSON序列化传递数据 #

把列表转成JSON字符串，传递到函数后再解析回来，这样能完整保留数据结构。修改后的代码如下：

function displayChildren(displayLocation, myList) {
  // 先判断如果传入的是JSON字符串，解析成原数据
  if (typeof myList === 'string') {
    myList = JSON.parse(myList);
  }
  
  let innerHtml = "";
  // 遍历列表更推荐用for...of（数组）或Object.entries（对象），避免for...in的原型链问题
  for (const name of myList) {
    const newDisplayLocation = displayLocation + "/" + name;
    // 把列表转成JSON字符串，同时转义双引号避免破坏HTML结构
    const listJson = JSON.stringify(myList).replace(/"/g, '"');
    innerHtml += `<a href='#' onclick='displayChildren("${newDisplayLocation}", "${listJson}");'>${name}</a><br>`;
  }
  
  // 创建新div并插入页面
  const newDiv = document.createElement('div');
  newDiv.innerHTML = innerHtml;
  // 如果displayLocation是用来指定容器的，这里可以改成找到对应容器插入，比如document.getElementById(displayLocation).appendChild(newDiv)
  document.body.appendChild(newDiv);
}

方案2：事件委托+Data属性（更推荐） #

这种方式不用拼接onclick字符串，而是把数据存在链接的data-*属性里，通过事件委托处理点击，更安全也更易维护：

// 给父容器绑定事件委托（这里用body做示例，最好换成更具体的父容器）
document.body.addEventListener('click', function(e) {
  // 判断点击的是我们生成的链接
  if (e.target.classList.contains('child-link')) {
    e.preventDefault(); // 阻止默认的#跳转行为
    // 从data属性里取出数据
    const location = e.target.dataset.location;
    const list = JSON.parse(e.target.dataset.list);
    // 调用函数
    displayChildren(location, list);
  }
});

function displayChildren(displayLocation, myList) {
  let innerHtml = "";
  for (const name of myList) {
    const newDisplayLocation = displayLocation + "/" + name;
    // 把列表转成JSON字符串存在data-list里
    const listJson = JSON.stringify(myList);
    innerHtml += `<a href='#' class='child-link' data-location="${newDisplayLocation}" data-list='${listJson}'>${name}</a><br>`;
  }
  
  const newDiv = document.createElement('div');
  newDiv.innerHTML = innerHtml;
  document.body.appendChild(newDiv);
}

这个方案的好处：

• 避免了拼接字符串带来的语法错误和潜在的XSS风险
• 代码结构更清晰，事件逻辑和DOM生成分离

额外小提示 #

• 如果displayLocation是用来定位放置新链接的容器，记得把document.body.appendChild(newDiv)改成找到对应容器的代码，比如给每个容器设置id为displayLocation的值，然后用document.getElementById(displayLocation).appendChild(newDiv)
• 遍历列表时，数组用for...of，对象用Object.entries(myList).forEach(([key, name]) => { ... })，比for...in更安全，不会遍历到原型链上的额外属性

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