如何使用JavaScript编写/输出带链接文本/标题的href链接

原代码存在的问题 #

• 变量引用错误：代码中使用了未定义的变量p，实际目标容器是已经通过id获取到的节点y
• 元素获取逻辑错误：getElementsByTagName("textcontent")为无效调用，HTML中不存在textcontent标签，无法获取到目标链接
• 范围选择错误：直接调用document.links会获取整个页面的所有链接，无法限定在目标容器范围内
• 输出逻辑错误：直接拼接DOM对象links[i]会输出[object HTMLAnchorElement]，无法生成符合格式要求的HTML字符串

预期输出规则 #

对容器内每个链接按如下格式渲染：

1. 输出新的a标签：href为原链接的href地址，增加rel="nofollow noreferrer"属性，标签文本和href值保持一致
2. 换行输出原a标签内的文本内容
3. 每组内容之间用换行分隔

可直接运行的正确代码 #

<y id='txt'>
<a href="http://google.com/123.asp">123</a>
<a href="http://google.com/456.asp">456</a>
<a href="http://google.com/789.asp">789</a>
</y>

<script>
// 获取目标容器节点
const txtContainer = document.getElementById("txt");
// 仅提取容器内的所有a标签
const aTags = txtContainer.getElementsByTagName("a");
let renderContent = "";

for (let i = 0; i < aTags.length; i++) {
  const currentA = aTags[i];
  const hrefVal = currentA.getAttribute("href");
  const originText = currentA.textContent.trim();
  // 按要求拼接内容
  renderContent += `<a href="${hrefVal}" rel="nofollow noreferrer">${hrefVal}</a><br>${originText}<br>`;
}

// 将生成的内容渲染到容器内
txtContainer.innerHTML = renderContent;
</script>

代码说明 #

• 所有元素查找都限定在目标容器范围内，不会干扰页面其他元素
• 遍历过程中单独提取每个a标签的href属性和原始文本，避免DOM对象直接拼接的异常
• 生成的HTML结构完全匹配预期输出要求，不需要额外依赖

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