如何修改包裹在<li>内的<a>标签href属性，解决其值为[object Text]的问题

问题原因 #

你给href属性赋值的变量是文本节点对象（也就是你代码里的newLabel或是误用来赋值的newURL如果也是文本节点的话），不是普通字符串。浏览器接收属性值时会自动把对象类型转为字符串，最终就得到[object Text]的异常结果。
你之前排查时能把对应变量作为子节点正常显示URL内容，是因为插入DOM时会自动读取文本节点的文本内容，和属性赋值的逻辑完全不同。

解决方案 #

你使用的setAttribute或者直接给.href赋值的方法本身没有问题，只需要调整赋值时传入的参数类型：

1. 赋值href时直接传入数组中存储URL的原始字符串值，不要传入你通过document.createTextNode()创建的文本节点对象
2. 文本节点仅用来作为<a>标签的子元素填充展示文本，不要参与属性赋值

正确代码参考 #

// 示例作品数组结构，根据你的实际结构调整即可
const portfolioList = [
  { label: "第一周作品", url: "week1/index.html" },
  { label: "第二周作品", url: "week2/index.html" }
]
const listContainer = document.querySelector('ol') // 替换为你的有序列表选择器

portfolioList.forEach(project => {
  const newLi = document.createElement('li')
  const newA = document.createElement('a')
  // 直接用字符串类型的URL给href赋值
  newA.href = project.url
  // 文本节点仅用来填充展示内容
  const linkText = document.createTextNode(project.label)
  newA.appendChild(linkText)
  newLi.appendChild(newA)
  listContainer.appendChild(newLi)
})

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