Question

此脚本应该添加一个按钮，按钮需要链接到xyz.com。我能够显示按钮，但它没有链接。这就是我所拥有的：

<script type="text/javascript">
var btn = document.createElement('button');
btn.innerText = 'Watch Now';
document.getElementById('buttoncontainer').appendChild(btn);
document.getElementById("buttoncontainer").href = "http://www.cnn.com/";
</script>

谢谢， UDI

Answer 1

如果您希望导航button，则必须添加比您拥有的更多的内容，因为button元素没有href属性并且默认情况下不会生成导航。您需要为此设置click事件处理回调函数。

另外，请勿使用.innerText，因为它不合标准。请改用 .textContent 。

＆＃13;

<div id="buttonContainer">
</div>
<script>
  var container = document.getElementById('buttonContainer');
  var btn = document.createElement('button');
  btn.textContent = 'Watch Now';
  
  // Buttons don't have an href. You need to set up a click event handler
  btn.addEventListener("click", function(){
    location = "https://cnn.com"; // Navigate to new page
  });
  
  // Add button to page
  container.appendChild(btn);
</script>

＆＃13;

如果您想要超链接（<a>），那么您可以使用href：

＆＃13;

<div id="buttonContainer">
</div>
<script>
  var container = document.getElementById('buttonContainer');
  var a = document.createElement('a');
  a.textContent = 'Watch Now';
  a.href = "https://cnn.com";
  
  // Add hyperlink to page
  container.appendChild(a);
</script>

＆＃13;

注意：

由于安全限制，这些都不会实际导航到Stack Overflow代码段环境中的CNN，但代码将在您自己的环境中运行。

用JS操纵DOM。添加按钮＆amp;链接

1 个答案: