如何将JS变量值分别赋值给a标签的href属性与链接文本？

云上老周

2026-10-6

正确实现的两种常用方案

方案1：原生JS创建DOM节点（推荐，无安全风险）

这是最标准的实现方式，不会有XSS注入风险，兼容性也最好：

var a_link = "someLink.com";
var a_text = "Some url text";

// 生成a标签元素
var anchor = document.createElement('a');
// 赋值href属性，自动补全协议避免跳转异常
anchor.href = a_link.startsWith('http') ? a_link : 'https://' + a_link;
// 赋值展示文本
anchor.textContent = a_text;
// 可选：如果要新页面打开，加上下面两个属性
anchor.target = '_blank';
anchor.rel = 'noopener noreferrer';

// 将生成的a标签插入到页面指定位置，示例是插入到body末尾，可替换为你需要的容器
document.body.appendChild(anchor);

方案2：HTML字符串拼接（仅变量完全可控时使用）

如果需要直接拼接HTML内容，可按如下写法，如果变量值来自用户输入不要用该方法，会有安全漏洞：

var a_link = "someLink.com";
var a_text = "Some url text";

var fullLink = a_link.startsWith('http') ? a_link : 'https://' + a_link;
var linkHtml = `<a href="${fullLink}">${a_text}</a>`;

// 插入到页面指定位置，示例是插入到body末尾
document.body.innerHTML += linkHtml;