如何用JavaScript创建带链接的按钮？现有代码无效求帮助

你之前的尝试存在两个核心问题：

• 单纯创建的button元素本身没有跳转能力，需要额外添加跳转逻辑或用链接标签包裹
• div元素不支持href属性，给它设置该属性不会产生跳转效果

下面是几种可行的实现方式：

方法1：用a标签包裹按钮（推荐） #

可以通过JS动态创建嵌套结构，这是最符合语义化的实现方式：

// 创建a链接标签
var link = document.createElement('a');
link.href = 'https://www.google.com'; // 必须添加http/https前缀，否则会被识别为相对路径
link.target = '_blank'; // 可选：设置为新窗口打开链接

// 创建按钮
var btn = document.createElement('button');
btn.innerText = 'yeni tuş';

// 嵌套并添加到页面
link.appendChild(btn);
document.body.appendChild(link);

方法2：给按钮绑定点击跳转事件 #

如果不想使用a标签，直接给按钮添加点击事件实现跳转：

var btn = document.createElement('button');
btn.innerText = 'yeni tuş';
// 绑定点击跳转逻辑
btn.addEventListener('click', function() {
  window.location.href = 'https://www.google.com';
});
document.body.appendChild(btn);

方法3：用样式将链接模拟成按钮 #

如果需要视觉上是按钮样式的链接，可直接给a标签添加按钮样式：

var link = document.createElement('a');
link.href = 'https://www.google.com';
link.innerText = 'yeni tuş';
// 添加按钮样式
link.style.padding = '8px 16px';
link.style.backgroundColor = '#007bff';
link.style.color = '#fff';
link.style.border = 'none';
link.style.borderRadius = '4px';
link.style.textDecoration = 'none';
link.style.cursor = 'pointer';

document.body.appendChild(link);

内容的提问来源于stack exchange，提问作者miraç reisoğlu