js实现超链接
使用HTML字符串创建超链接
在JavaScript中，可以通过拼接HTML字符串动态生成超链接，并插入到DOM中。
const linkText = "点击访问示例网站";
const url = "https://example.com";
const htmlString = `<a href="${url}">${linkText}</a>`;
// 插入到指定元素中
document.getElementById("container").innerHTML = htmlString;使用document.createElement动态创建
通过DOM API创建<a>元素，设置属性后添加到页面：
const link = document.createElement("a");
link.href = "https://example.com";
link.textContent = "动态创建的链接";
link.target = "_blank"; // 可选：新标签页打开
// 添加到DOM
document.body.appendChild(link);使用innerHTML直接插入
若目标元素允许直接修改HTML内容，可通过innerHTML快速插入：
document.querySelector("#linkContainer").innerHTML =
'<a href="https://example.com" title="示例">示例链接</a>';事件监听与自定义行为
为超链接添加点击事件，实现自定义逻辑（如阻止默认跳转）：
const customLink = document.createElement("a");
customLink.href = "#";
customLink.textContent = "自定义行为链接";
customLink.addEventListener("click", (e) => {
e.preventDefault();
console.log("链接被点击，但未跳转");
});
document.body.appendChild(customLink);动态修改现有超链接
通过JavaScript修改已有超链接的属性或内容：
const existingLink = document.querySelector("a.existing");
existingLink.href = "https://new-url.com";
existingLink.textContent = "更新后的文本";注意事项
- 安全性：若链接的URL或内容来自用户输入，需使用
encodeURIComponent或DOMPurify等工具防止XSS攻击。 - 性能：频繁操作DOM可能影响性能，建议批量处理或使用文档片段（
DocumentFragment）。 - SEO：动态生成的链接需确保搜索引擎能正确抓取，必要时使用服务端渲染（SSR）。
以上方法覆盖了从基础创建到高级定制的常见需求，可根据实际场景选择合适方案。
